vue3中的computed和watch

最新推荐文章于 2025-11-23 23:58:26 发布

原创最新推荐文章于 2025-11-23 23:58:26 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

59 篇文章

订阅专栏

本文深入探讨Vue中的computed和watch函数用法，包括只读和可写计算属性的实现方式，以及如何使用watch和watchEffect函数监视响应式数据的变化，并触发相应的回调处理。

computed函数:

与computed配置功能一致
当回调中只有一个函数的时候只有getter
有getter和setter

 const fullName1=computed(() => {
       console.log('fullName1')
      return user.firstName + '-' + user.lastName
    })
     const fullName2 = computed({
      get () {
        console.log('fullName2 get')
        return user.firstName + '-' + user.lastName
      },

      set (value: string) {
        console.log('fullName2 set')
        const names = value.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })

watch函数

与watch配置功能一致
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
通过配置deep为true, 来指定深度监视

实现首次进入就执行watch

 const fullName3 = ref('')
    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName
      }, {
        immediate: true,  // 是否初始化立即执行一次, 默认是false
        deep: true, // 是否是深度监视, 默认是false
      })
      //相当于
      /* watchEffect(()=>{
	      fullName3.value=user.firstName+'-'+user.lastName
	    })*/
    watch(fullName3,(value)=>{
      console.log("watch");
      const names = value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    },)

watchEffect函数

不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
默认初始时就会执行第一次, 从而可以收集需要监视的数据
监视数据发生变化时回调

 watchEffect(()=>{
      fullName3.value=user.firstName+'-'+user.lastName
    })