Vue computed和watch

1.Computed

computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，根据计算所依赖的属性动态返回新的计算结果。

data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName:''  //不可重复定义
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

computed和data的定义不可重名，否则是会报错的。
computed是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，如果依赖没有改变，多次访问fullName这个计算属性，都会立刻返回之前的结果，不必再重新计算。
计算属性默认只有 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]
    }
  }
}

2.Watch

watch选项是一个对象，键是data里面的数据，值是对应的回调函数，回调函数有两个参数分别为修改后的值newValue和修改前的值oldValue。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。

data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: {
      handler:function (val) {
        this.fullName = this.firstName + ' ' + val
      },
      immediate:true,    //页面首次加载的时候做一次监听，默认是只有值改变才会监听的
      deep:true        //深度监听
    }
  }

watch在实例加载时是默认不监听的，使用immediate:true，可以在首次加载时也做监听。
watch只监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听，使用deep:true可进行深度监听。

computed与watch的应用场景：computed一般应用在多个数据影响一个数据的操作，如购物车。watch一般使用在一个数据来影响多个数据的操作，如搜索框

computed和watch的区别

1.computed函数必须用return返回计算的值，watch没有return的必须要求
2.computed有缓存，如果依赖的值没有改变，调用computed函数时则不会执行函数重新计算，直接返回缓存的值。watch没有缓存，每次监听的值发生改变都会执行。

最后编辑于：2020.05.12 16:11:26