Vue中的 watch 监听使用与计算属性 computed使用小记

愿不忘初心

于 2019-01-30 15:26:59 发布

阅读量376

点赞数

分类专栏：前端框架Vue

本文链接：https://blog.youkuaiyun.com/qq_36140085/article/details/86703869

版权

前端框架Vue 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨Vue.js中数据响应机制，包括watch监听器的使用，如何观察实例变化，以及计算属性的缓存机制和getter/setter的实现方式。通过实例说明，帮助开发者更好地理解和应用Vue的数据绑定特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

观察 Vue 实例变化的一个表达式或计算属性函数

    // a 单个属性的监听
    // 'obj.a'字符串形式监听对象单个属性
    // obj 对象监听，给对象的所有属性都加上监听器，性能开销会非常大
    watch: {
     'obj.a': {
      handler(newName, oldName) {
       console.log('新值--', newName, '旧值--', oldName)
      },
      immediate: true, // 该回调将会在侦听开始之后被立即调用一次
      deep: true // 深度 watcher,为了发现对象内部值的变化,注意监听数组的变动不需要这么做。
     }
    }

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。


 data() {
    return {
        a:1
    }
}

// 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
computed: {
 // 仅读取
 v1: function() {
  return this.a * 2
 },
 // 读取和设置
 v2: {
  get: function() {
   return this.a + 1
  },
  set: function(v) {
   this.a = v - 1
  }
 }
}

this.v2 // => 2
this.v2 = 3
this.a // => 2
this.v1 // => 4