Vue 中 watch(监听属性) 和 computed(计算属性) 的对比

最新推荐文章于 2024-04-08 06:39:46 发布

满洲里韦布

最新推荐文章于 2024-04-08 06:39:46 发布

阅读量1k

点赞数 3

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/VnOcean/article/details/131034125

版权

vue 中的监听属性 watch 和计算属性 computed 都有监听的作用，但具体的适用场景和方法是由区别的

computed

computed 相当于定义一个变量，这个变量接收其后函数的返回值，函数里面的属性值经过计算返回给函数前面的变量，当函数里面的属性发生变化的时候，就会触发这个函数进行计算，更新computed 定义的变量，并将计算后的结果进行缓存，在函数里面的属性没有发生变化的情况下，都会调用缓存中的数据。

compute中定义的变量都是新的变量，这个变量可以直接在代码中进行使用，而不是在props/data中进行定义，更注重的是计算而得的变量。

计算属性(computed)不能进行异步操作因为计算属性(computed)是通过return返回值传递参数异步操作的时候return是没有意义的。

computed 的方法里面的属性值发生变化，触发计算函数，并将计算结果进行缓存，在返回给变量，和watch的顺序刚好是相反的。

import { computed, defineComponent } from 'vue'
export default defineComponent({
    setup({
        const name = ref<any>('')
        const ristName = ref<any>('')
        const lastName= ref<any>('')
        // 添加watch监听
        name.value = computed(() => {
            // fristName 或者 lastName变化触发方法，重新计算，从而改变name的值
           return fristName + lastName
        })
        return {
            name,
            ristName,
            lastName
        }
    })
})

适用环境：一个数据受多个数据影响的场景。

watch

watch像是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

watch 是浅层的，被侦听的属性，仅在被赋新值时，才会触发回调函数，而嵌套属性的变化不会被触发，（如对象中的属性），如果想要侦听所有嵌套属性的变更，则需要深层侦听器。

// 深层侦听
export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }
}
// 深层侦听，需要遍历被侦听对象的所有嵌套的属性，当遇到复杂度高的大型数据结构的时候，开销会很大。

watch 支持异步，没有缓存，他监听的变量是在props/data中已经定义的变量，更加侧重的是处理的函数。

//在vue中3使用：
import { watch， defineComponent } from 'vue'
export default defineComponent({
    setup({
        const name = ref<any>('')
        // 添加watch监听
        watch(name, (oldValue, newValue) => {
            // name 发生变化，触发方法，进行逻辑处理
            // todo 进行相应的逻辑， 重点在于name值变化之后，回调方法的逻辑处理
        })
        return {
            name
        }
    })
})