一、setup的两个注意点
·setup执行的时机: 在beforeCreate之前执行一次,this是undefined
·setup的参数
props: 值为对象,包含: 组件外部传递过来,且组件内部声明接收了的属性
context: 上下文对象 包含: 1、attrs:值为对象,包含组件外部传递过来,但没有在props配置中声明的属性,相当于this.attrs; 2、slots: 收到的插槽内容,相当于this.slots; 3、emit: 分发自定义事件的函数, 相当于this.$emit.
二、计算属性与监视
7.1、computed函数
·与Vue2.x中的computed配置功能一致
·写法
7.2、watch函数
·与Vue2.x中的watch配置功能一致
·两个小坑:
a,监视reactive定义的响应式数据时: oldVlaue无法正确获取,强制开启了深度监视(deep配置失效)
b,监视reactive定义的响应式数据中某个属性(对象类型)时: deep配置有效
7.3、watchEffect函数
·watch的原理: 既要指明监听的属性, 也要指明监听的回调
·watchEffect的原理: 不用指明监听的哪个属性,监视的回调中用到的哪个属性, 那就监听哪个属性
·watchEffect特点(类似于computed)
a,但computed注重计算出来的值(回调函数的返回值),所以必须要写返回值
b,而watchEffect更注重的是过程(回调函数的函数体), 所以不用写返回值
三、生命周期
8.1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但是两个被更名
·beforeDestroy改名为beforeUnmount
·destroyed改名为unmounted
8.2、Vue3.0也提供了Composition API形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
·beforeCreat => setup()
·created => setup()
·beforeMount => onBeforeMount
·mounted => onMounted
·boforeUpdate => onBeforeUpdate
·updated => onUpdated
·beforeUnmount => onBeforeUnmount
·unmounted => onUnmounted
四、自定义hook函数
定义: 本质是一个函数,把setup函数中使用的Componsition API进行了封装
·类似于vue2.x中的mixin
·自定义hook的优势 : 复用代码,让setup中的逻辑更清楚易懂
五、toRef和toRefs
·作用: 创建一个ref对象,其value值指向另一个对象中的某个 属性
·语法: const name = toRef(person, 'name')
·应用: 要将响应式对象中的某个属性单独提供给外部使用时
·扩展: toRefs与toRef功能一致, 但可以批量创建多个ref对象,语法: toRefs(person)
