2021-08-15 vue属性computed和watch的区别

简答

computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子： 购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

官网例子

监听属性例子:

	data: {
	    firstName: 'Foo',
	    lastName: 'Bar',
	    fullName: 'Foo Bar'
	  },
	 watch: {
	    firstName: function (val) {
	      this.fullName = val + ' ' + this.lastName
	    },
	    lastName: function (val) {
	      this.fullName = this.firstName + ' ' + val
	    }
  }
})

*watch主要用于监控vue实例的变化，它监控的变量必须在data里面声明才可以

计算属性例子

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

*computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

理解

计算属性,即通过属性计算得来的属性.是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值.适用于属性发生变化后，需要计算得到新的数据。

监听属性,监听的属性发生变化时就会触发监听的函数.一般是用于跟数据无关的业务逻辑操作.