vue3 day2

6.setup的两个注意点

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

  • context：上下文对象

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

7.计算属性与监视

1.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]
           }
       })
   }
  

2.watch函数

• 与Vue2.x中watch配置功能一致

• 两个小“坑”：

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

   //情况一：监视ref定义的响应式数据
   watch(sum,(newValue,oldValue)=>{
       console.log('sum变化了',newValue,oldValue)
   },{immediate:true})
   ​
   //情况二：监视多个ref定义的响应式数据
   watch([sum,msg],(newValue,oldValue)=>{
       console.log('sum或msg变化了',newValue,oldValue)
   }) 
   ​
   /* 情况三：监视reactive定义的响应式数据
               若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
               若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
   */
   watch(person,(newValue,oldValue)=>{
       console.log('person变化了',newValue,oldValue)
   },{immediate:true,deep:false}) //此处的deep配置不再奏效
   ​
   //情况四：监视reactive定义的响应式数据中的某个属性
   watch(()=>person.job,(newValue,oldValue)=>{
       console.log('person的job变化了',newValue,oldValue)
   },{immediate:true,deep:true}) 
   ​
   //情况五：监视reactive定义的响应式数据中的某些属性
   watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
       console.log('person的job变化了',newValue,oldValue)
   },{immediate:true,deep:true})
   ​
   //特殊情况
   watch(()=>person.job,(newValue,oldValue)=>{
       console.log('person的job变化了',newValue,oldValue)
   },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
  

3.watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

   //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
   watchEffect(()=>{
       const x1 = sum.value
       const x2 = person.age
       console.log('watchEffect配置的回调执行了')
   })
  

8.生命周期

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted

• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

  • beforeCreate===>setup()
  • created===>setup()
  • beforeMount ===>onBeforeMount
  • mounted===>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated ===>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =>onUnmounted