vue之computed和watch

最新推荐文章于 2024-08-13 19:51:27 发布

转载最新推荐文章于 2024-08-13 19:51:27 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lalalagq/p/9960310.html

文章标签：

#javascript #ViewUI

本文深入解析Vue.js中Computed与Watch的特性及使用场景。Computed属性用于基于其他数据进行缓存计算，仅在依赖数据变化时更新；而Watch则在数据变化时执行指定函数，适合异步或高开销操作。理解两者区别，可有效提升Vue应用性能。

计算属性 computed

侦听器or观察者 watch

一直以来对computed和watch一知半解，用的时候就迷迷糊糊的，今天仔细看了看文档，突然茅塞顿开，原来就是这么简单啊：

computed，通过别人改变自己
watch，通过自己改变别人

需要注意的是，computed会缓存数据，只有在满足以下两个条件时才会重新计算：

1、存在依赖型数据，即存在于VUE的data等对象的实下的实例数据
2、依赖型数据发生改变

如果不满足以上两个条件，computed不会重新计算，只会拿缓存的数据。而watch，只要调用他，他就会执行。

注意：computed会缓存数据，所以进行开销较大的操作时不适合用它。

非依赖型数据发生改变时，这是使用methods方法即可。

computed也可以通过自己改变别人

computed默认只有 getter ，不过在需要时也可以提供一个 setter：


    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }

然后运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。