Vue3学习——computed、watch、watchEffect

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

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

情况一：监视ref定义的响应式数据

• 监视ref定义的对象，改变某一个属性时，newValue和oldValue是同一个值;
• 若改变整个对象newValue和oldValue不一样;

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

情况二：监视多个ref定义的响应式数据(写成数组格式)

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

情况三：监视reactive定义的响应式数据,deep默认开启，且关不掉

	 watch(person, (newValue, oldValue) => {
 	     console.log('person变化了', newValue, oldValue)
  	  }, {immediate: true, deep: false}) //此处的deep配置不再奏效

情况四：监视reactive定义的响应式数据中某个属性

• 可以监视整体改变，也可以监视某个属性改变
• 监视的属性不是【对象类型】，需写成函数
• 监视的属性是【对象类型】，可直接编，也可使用函数，推荐使用函数并添加deep属性
  （因为直接写person，无法监听到整个对象的改变;deep是为了深层监听）

    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配置有效

停止监视

    const stopWatch =  watch(sum, (newValue, oldValue) => {
      console.log('sum变化了', newValue, oldValue)
      if (sum > 10) {
        stopWatch() // 停止监视
      }
    })

watchEffect

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

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

• watchEffect有点像computed：

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

// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。初始化也会执行一次

watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})