vue3.0 composition API

一、Setup函数

1.创建时间：组件创建之前被调用，优先与created被调用，this指向的实例为window,created所指向的实例为proxy

 

2.this指向：不会指向组件实例

3.参数为props和context,context可被解构为{attr,slots,emit}

4.函数的返回对象，对象的属性可以直接在模板中使用。

5.生命周期

注意：参数props为响应式，但是当将其解构出来后便失去响应，建议最好不要解构

二、Proxy实现响应

1.proxy是一个对象

2.可以代理一个对象或函数

3.允许拦截被代理的对象或函数

 

 

三、 reactive和toRef

注意：vue3.0中无法对响应式数据进行解构，解构后的数据将失去响应性。但可通过toRef()函数进行包裹实现响应式。

 

 四、watch、watchEffect、computed

关于watch

watch监听数组或对象的嵌套属性时，需要将souce指定为一个函数，并将监听属性return 出去

 

关于watchEffect

1.watchEffect不会监听某一个值的变化

2.watchEffect函数参数是否重新执行，取决于依赖项是否发生了变化

 

 关于computed 

 五、provide和inject

在官方文档中说明，provide可以接受值或者是函数，如果注入子组件中，子组件想要改变注入的值可以通过传递函数的方式，但并不建议直接在子组件中修改值，可通过readOnly的方式加强规则。

 

 

 

 六、teleport移动

 

 七、watchEffect

1.watchEffect对所有数据进行劫持，直到实例被摧毁时才停止

2.可手动对watchEffect进行停止

3.watchEffect存在副作用，它内部可能是一个异步函数，导致数据并未在其之前更新，需要通过onInvalidate去解决副作用

如下事例：

 

4.flush: 'sync', 'pre'，’post‘

 八、ref、toRef、reactive、toRefs、unRef