Vue Composition API 理解

本文主要是介绍Vue Composition API 理解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Composition API——用户层面

Vue 框架
使用hook ->组合起来->Vue3.0 Composition API框架设计模式
e.g. watch - { watch,onMounted,computed } from 'vue‘;

{}里面的是hooks钩子,在 set up（）中使用

基本按照文档顺序，会记录一些不熟或新功能点

Composition API: setup() | Vue.js (vuejs.org)

setup()

1. .value is no need

2 return ender function() ;不使用<template>

3. set up(props)

响应式

setup(props){
        watchEffect(()=>{
            console.log(props.title);
        })
        //改变前后执行2次

        watch(()=> props.title,(newValue)=>{
             console.log(newValue);
        })
        //改变后执行1次

    }

不要解构，否则失去响应式

setup(props, ctx )

ctx 打印出

plus

reactive

1.无this

const proxy0bj = reactive({
      a: 1,
      b: 2
      });
console.log(proxy0bj);

使用响应式对象，不使用原对象

console.log( count);
const obj = ref({
   a:1,
   b:2
});
console.log(obj);

const count = ref(0);
const state = reactive({
  count
})
state.count=1;
console.log(state.count)//1

4.存放Array 或者集合对象，不会展开访问 value

Refs

export default {
    name:'Ref',
    setup(){
        const name = ref('');
        name.value='张三';
        setTimeout(()=>{
            name.value='李四'
        },2000);
    return{
        name
    }
    }

}

2.deeply reactive

3.unref 语法糖

Returns the inner value if the argument is a ref, otherwise return the argument itself. This is a sugar function for

val = isRef(val) ? val.value : val.

4.toref

The created ref is synced with its source property: mutating the source property will update the ref, and vice-versa.

这篇关于Vue Composition API 理解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript