[vue]setup组合式api的写法和分析

1.组合式api的用途

在正常的组件式开发里面，vue的属性data，method，还有钩子函数这些东西都是分开的，大型开发的时候不太好处理，但是如果在setup里，把有关的函数变量写在一堆，就会显得更加容易区分

1.组合式写在setup()函数里面

2.如果想让外界访问什么东西，就要return返回一下

2.基本语法：

(1)基本变量，对象，函数的写法

setup(){

    const m="hello"

    let m1={
      message:"!"
    }

    function changeMsg(){
      alert("!!");
      m1.message="!";
    }

}

但是这里有个问题就是，这里面写的对象和常量并不是响应式的

（2）响应式对象的书写方法

    const a=ref(0);
//创建响应式的数据


     const b=reactive({
      age:10,name:"zhangsan",address:{message:"12"}
    });
//创建响应式的对象
//这里就算是里面嵌套的东西也是响应式的

不过这样创建的话，产生的是一个具有value属性的对象，要具体访问数据的话，就要用。value函数进行访问

（3）上述两种数据的读取方法

首先要对进行读取的东西return抛出

 return {m,m1,changeMsg,v,changeVal,a,b,...b,...toRefs(b),reverseMsg}

然后在外界读取的时候，可以不用加上value了.会自动识别

{{m1}}
{{obj.message.num}}

（4）另外有一种情况，es6语法中的结构（...）

比如原版本为obj对象里面的message属性等，我们访问的时候想要直接访问{{message}}

有两种方法。1在返回的时候直接解构

return {...obj} 

2,结构成一堆东西再返回

const {message，。。。。}=...obj


return {message}

但是这样的效果就是会把原本响应式的东西，解构成一堆根本没有响应效果的元素，如果想让解构出来的东西重新具有响应式，就要用到toRefs函数

return {toRefs(...obj),}


//或者
const {XX，XX}=toRefs(...obj)
return {xx,}

3.setup中的两个参数

props和context，详见官方文档，感觉用不上

4.setup()中用到的生命周期钩子函数

在setup中钩子函数的名字比正常的钩子函数多个一个on

而且这里面不能使用create相关的生命周期钩子

//例如mouunt

   onMounted(()=>{
      //执行对应的钩子函数
    })

//调用方法就是使用回调函数进行执行，并且因为是在组合api
//所以函数可以调用很多次

onMounted(()=>{
      //执行对应的钩子函数
    })

onMounted(()=>{
      //执行对应的钩子函数
    })

5.关于setup中provide和inject的用法

感觉化简了很多的调用方法，实际用起来很像sessionStorage

   //父组件中
 provide("name","value");
    provide("name2","value2");

//孙组件或者更低的组件

    const a=inject("name");
    const b=inject("name2");

6.关于计算属性的使用

计算属性我们这里默认只用get方法

const reverseMsg=computed(()=>"回调函数执行成功")

//同样是借用回调函数返回一个数值

7.关于监听方法这里有两种

   watch(a,(newValue,oldValue)=>{
      //这里是对a这个对象进行监听，如果发生改变就会输出
      //不过不适合监听对象的内部属性
    })


    watchEffect(()=>{
      //这里没有任何参数，but很有意思
      console.log(v.value)
      //如果后续碰到v.value发生改变，就会重新出输出，原因是一次调用以后
      //这个函数会给对应的东西，比如这里使用过一次的v绑定依赖
    })