目录：

1、认识CompositionAPI

2、Setup函数的基本使用

3、Setup中数据的响应式

4、Reactive知识点补充

5、Ref知识点补充

6、setup中禁用this

7、Chrome插件 vue-devtool

 

一、认识CompositionAPI

 

函数式写法更灵活，还可以抽取代码段出来做成hook函数复用（类似uesxxx的函数）。

 

 

 

二、Setup函数的基本使用

（1）基本使用：

export default{

        setup（props等参数）{

        return{ }

        }

}

（2）引入hooks函数：

import  usexxx  from xxxxx

export default{

        setup（props等参数）{

        const {  xxx ，yyy，zzz } = usexxx()

        return{  xxx ，yyy，zzz } 或者 return{  ...usexxx() }

        }

}

 

 

三、Setup中数据的响应式

template里面的响应式的ref变量会自动解包，就不用  .value来获取了。

ref/reactive都是代理

注意：

（1）reactive传入的值必须是复杂数据（比如对象，数组），ref是用简单数据也可以定义复杂数据（字符串或者数字什么的）

(2)setup里面的内容只有return的内容才会被template绑定

（3）由于reactive只能绑定复杂数据，例如下图的state，要取里面的值必须{{ state.name }}，不方便，于是出现了ref

（4）这样子改值是错误的ref还没解包。改成这样子就可以修改了

 （5）在template里面的变量解包意味着直接修改也没问题，不需要写成和setup里面的xx.value的形式。

 （6）什么时候使用reactive，什么时候使用ref？

1.使用reactive的场景： 

 聚合的数据是指那些应该被放在一起统一管理的数据，如表单的用户名和密码，用在reactive里面好管理。

本地数据是指，你在本地需要先创建好，然后使用的，之后可以和其他的放开管理。

 

2.使用ref的场景： 

从网络上获取的数据，依靠reactive是改不了的，因为使用方法是musics.xxx。但是里面是空的数组，使用改不了对象，可以靠for循环在join进去。用ref的话可以直接赋值就可以了。

 （6）关于readonly：

我们从父组件向子组件传递的一般都是reactive的数据，都是引用型数据，子组件props获取并使用以后是可以在子组件的方法里面修改props接收的值的。都是子组件这样子修改props的值会导致父组件的值也被修改。如果这个props接收的值是有很多子组件都有的。那父组件不知道是哪个子组件修改的。并且也违背了vue的单向数据流的规范。只建议子组件向父组件传递emit来修改值。readonly创建的也是响应式的。

readonly注意使用的时候括号里面的内容是对象obj，就是reactive的变量名称，readonly的左边还得取个名字。

 

setup的emit写法：

 readonly写法：

 

 

 

注意这个浅层解包的不同。 

 

 

四、Reactive知识点补充

五、Ref知识点补充

六、setup中禁用this

七、Chrome插件 vue-devtool

手动下载，商店下载