vue中watch和computed的分析

vue中watch和computed的分析

在某些场景中watch和computed有相同的用处，下面来详细说明其异同之处。

先来说说computed属性：
computed是一个计算属性，类似于filter过滤属性，对绑定到view上的数据进行处理并响应。

computed的用法：

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    diyText: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

diyText不能在data中定义，否则会报错：

因为如果在data中定义了，就不能在computed中重新定义和赋值。

computed是通过Object.defineProperty来劫持各个属性的getter和setter，在数据变动时发布消息给订阅者，触发相应的监听回调。

get和set用法：

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
computed: {
	 fullName：{
		  get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
		     return this.firstName + ' ' + this.lastName
		   },
		  set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
		      //val就是fullName的最新属性值
		      console.log(val)
		       const names = val.split(' ');
		       console.log(names)
		       this.firstName = names[0];
		       this.lastName = names[1];
		  }
	 }
  }

接下来说说watch属性：
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
	 }
 }

监听firstName和lastName的变化，如果是复杂的数据结构就需要用到深度监听。
示例：

data(){
 return{
    'first':{
      second:0
    }
  }
},
watch:{
  secondChange:{
    handler(oldVal,newVal){
      console.log(oldVal)
      console.log(newVal)
    },
    deep:true
  }
}

打印的结果,发现oldVal和newVal值是一样的，原因是它们索引同一个对象/数组，所以深度监听虽然可以监听到对象的变化，但是无法监听到具体对象里面那个属性的变化。

深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

computed和watch的区别：