Vue3技术之 setup、computed、watch 容易踩坑的点！

 聊点不一样的东西，面试中vue3容易踩坑的点！

setup的两个注意点

• setup执行的时机
• 在beforeCreate之前执行一次，this是undefined

 setup的参数

• props: 值为对象，包含: 组件外部传递过来，且组件内部声明接收了的属性
• context:上下文对象
• attrs: 值为对象，包含: 组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs
• slots: 收到的插槽内容,相当于 this.$slots
• emit: 分发自定义事件的函数,相当于 this.emit

setup(props,context){
    console.log('context.attrs',context.attrs)//相当于vue2中的$attrs
    console.log('context.emits',context.emits)//触发自定义事件的$emits
    console.log('context.slots',context.slots) //插槽
}

计算属性与监视

computed函数

注意：与Vue2.x中computed配置功能一致，写法

import {computed} from 'vue'
setup()(
//计算属性一简写  （没有考虑计算属性被修改的情况——是只读的）
let fullName = computed(()=>{return person.firstName + '-' + person.lastName})
//计算属性一完整  （考虑读和写）
let fullName = computed({
  get(){
     return person .firstName + '-+ person.lastName
  },
  set(value){
     const nameArr = value .split('-')
     person.firstName = nameArr[0]
     person.lastName = nameArr[1]
  }
 })
}

watch函数

 watch 三个参数：

•    第一个参数： 监视的对象
•    第二个参数：监事的回调
•    第三个参数：监视的配置

两个小“坑”:

•  监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视 (deep配置失效)
•  监视reactive定义的响应式数据中某个属性时:deep配置有效

watch 监听数据有以下五种情况：

1、监视ref定义的响应式数据：

watch(sum,(newValue, oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true})

2、监视多个ref定义的响应式数据 （ vue2中的 watch 是个配置项 不可写两个）：

watch([sum,msg],(newValue ,oldValue)=>{
    console.log('sum或msg变化了',newValue,oldValue)
})

3、监视reactive定义的响应式数据的全部数据：   

watch(person,(newValue,oldValue)=>{
   console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) 

• 注意：此处无法正确获取oldValue
• 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue
• 若watch监视的是reactive定义的响应式数据，则强制开启了深度监视

4、监视reactive定义的响应式数据中的某个属性：

watch(()=>person.job,(newValue,oldValue)=>{
   console.log('person的job变化了', newValue,oldValue)
},{immediate:true,deep:true})

5、监视reactive定义的响应式数据中的某些属性：

watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
   console.log('person的name或age变化了', newValue,oldValue)
},{immediate:true,deep:true})