Vue之computed

Posted 2023-04-10

参考技术A computed：（多对一个computed变量）
1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义
2.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。例如，通过多个input输入值去改变按钮是否可以点击
watch:（一个watch对多）
1.watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以

计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

当你需要在template中根据参数显示不同的数据，那么就可以使用computed，如果使用的是methods就会导致每次渲染加载，影响页面加载效率

vue之computed和watch

计算属性 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 也会相应地被更新。

什么时候使用

computed

1、其他依赖型数据发生改变，自身也要改变的时候

2、自身改变了，想要改变其他数据的时候，这时需要添加setter

watch

1、自身改变时改变其他数据

2、当需要在数据变化时执行异步或开销较大的操作时

原文地址：https://segmentfault.com/a/1190000012610140