06_Vue3中的计算属性与监视

目录

一、computed函数

 二、watch函数

与Vue2中watch配置功能一致

两个“小坑”

六种情况

解答：watch函数监视ref定义的响应式数据是否需要加 .value 

 三、watchEffect函数

---

一、computed函数

• 与Vue2中computed配置功能一致
• 写法

 二、watch函数

• 与Vue2中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)
      },{immediate:true})

    /*情况三：监视reactive所定义的一 个响应式数据
      1.注意：此处无法正确的获取oldValue//ref定义的对象和数组，最终实质都是通过reactive，所以改为ref定义也不行
      2.注意：强制开启了深度监视（deep配置false也无效）*/
      watch(person,(newValue,oldValue)=>{
          console.log('person变化了',newValue,oldValue)
        },{deep:false}) //此处的deep配置无效

    //情况四：监视reactive所定义的一个响应式数据中的某个属性
    // 此处不能直接写person.age，要写成一个函数
     watch(()=>person.age,(newValue,oldValue)=>{
       console.log('person的age变化了',newValue,oldValue)
     },)

    //情况五：监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
      console.log('person的age或name变化了',newValue,oldValue)
    },)

    //特殊情况
    watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue)
    },{deep:true})//此处由于监视的是reactive定义的对象中的某个属性（这个属性依然是个对象），所以deep配置有效

代码：

解答：watch函数监视ref定义的响应式数据是否需要加 .value 

由ref定义的响应式数据，若数据为基本数据类型，则不需要.value；若数据为对象这种引用类型，则监视时需要加 .value 或开启deep:true深度监视。

    //数据
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = ref({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    //监视基本数据类型
      watch(sum,(newValue,oldValue)=>{
        console.log('sum的值变化了',newValue,oldValue)
      })

    //监视person  加 .value或开启deep深度监视
    //此处存在oldValue无法正确获取的问题
    watch(person.value,(newValue,oldValue)=>{
      console.log('person的值变化了',newValue,oldValue)
    })
    watch(person,(newValue,oldValue)=>{
      console.log('person的值变化了',newValue,oldValue)
    },{deep:true})

 三、watchEffect函数

• watch的套路是，既要指明监视的属性，也要指明监视的回调。
• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，就会自动监视哪个属性。
• watchEffect有点像computed：
  • 但 computed 注重计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。

    //数据
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
      //  监视
      /*watch(sum,(newValue,oldValue)=>{
        console.log('sum的值变化了',newValue,oldValue)
      },{immediate:true})*/

    //用到哪个数据，监视哪个数据
    watchEffect(()=>{
      const x1 = sum.value //sum变化会监视到
      const x2 = person.job.j1.salary  //salary变化会监视到
      console.log('watchEffect所指定的回调执行了！')
    })