1.compoisitonAPI是什么

原来实现一个小的Demo使用opitionsAPI需要的步骤

Vue2demo

如果还有其他的网络请求的话，代码量将进一步增加

现在vue3使用compoisitonAPI需要的步骤

vue3

在script中的代码量减少了许多，并且阅读性更强，不需要到处找

甚至我们可以进一步进行简化，只需要四行逻辑代码即可操作上面的demo，当然这样的使用方法还是一个实验特性，不推荐大规模使用，具体见rfcs

setup函数的使用

1.setup的参数

setup主要有两个参数，一个是props，一个是context

context可以进行一个结构

setup参数

2.setup的返回值

return出去的值可以替代vue2中的data里面的数据和methods中的方法

setup的返回值

在模板中使用{{count}}是不能渲染的，因为数据这时不是响应式的，需要一个API将数据转变成响应式

3.将数据转变为响应式

vue3提供了两个API将数据转变为响应式,需要提前在vue中进行导入

3.1  reactive 

reactive可以将数组或者对象类型进行响应式转换 

reactive

3.2 ref

ref可以传入基本数据类型（string，number，Boolean），传入数据后变为一个ref对象，需要用.value方式进行取值

ref

但是在模板语法中可以直接使用ref对象，而不用.value方式取值，但是vue对ref是一个浅层解包，如果在对count进行一个xx对象包裹,在模板语法中将不能直接使用{{xx.count}},而是要使用{{xx.count.value}},但是使用reactive进行包裹vue是可以进行解包的即可以使用{{xx.count}}

4.readonly 

readonly是只读属性，用readonly进行包裹后数据将不能被修改

readonly

在用update方法进行修改nameInfo1/2/3时，浏览器都会报一个警告，并且此时的数据并没有发生变化

warning

readonly内部是使用一个Proxy进行数据代理，访问数据时通过get方法进行return原数据，在进行set方法修改数据return一个warning

5.关于this的问题