Vue3学习——computed、watch、watchEffect-Toy模板网

这篇具有很好参考价值的文章主要介绍了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更注重的是过程（回调函数的函数体），所以不用写返回值。文章来源地址https://www.toymoban.com/news/detail-836124.html


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

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

到了这里，关于Vue3学习——computed、watch、watchEffect的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！