Vue3学习-计算属性和监视属性

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

---

一、computed函数

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

• 写法

  // 引入Vue中的computed函数
  import {computed} from 'vue'
  
  setup(){
      ...
      //使用computed函数
  	//计算属性——简写
      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函数

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

• 两个小 “坑”：

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

  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

• 注意：ref定义时对象或数组类型时，底层一样会转换为reactive，所以此时还会有这两个小 “坑” 存在！

  具体编码：

   //情况一：监视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配置有效
   ```
  
  
  

三、watchEffect函数

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

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

• watchEffect 有点像 computed：

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

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

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通