computed计算属性和watch监听总结

在开发中常用到计算属性和监听属性，虽然两者实现的功能很相似，但是还是有一定差别的，以下总结了computed计算属性和watch监听。
1、computed计算属性
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新。

//计算属性是根据data中已有的属性，计算得到一个新的属性，
var vm=new Vue({
	  el:"#app",
	     data:{
          firstname:"李",
          lastname:"四",
        },
        computed:{
			fullName:{
					return this.firstname+this.lastname
			}
		}
})

(1)get
基础写法只有get，代码写法简单，在getter函数内return计算结果。
例如：

var vm = new Vue({
	el: '#demo',
	data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    // 计算属性的 getter
    fullName: function () {
      // 1、`this` 指向 vm 实例
      // 2、return计算结果
      return this.firstName + ' ' + this.lastName
    }
  }
})

(2)set

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]
    }
  }
}

（1）创建计算属性通过computed关键字，它是一个对象。
（2）computed是对data中的一些数据进行操作，从而获得一个新的属性，避免在标签中进行操作。
（3）计算属性computed可以监听多个data对象里面的变量。
（4）compulate有两个方法:get 和 set。当计算属性改变时会触发set函数，从而改变data中的数据。

2、watch监听
watch属性和computed属性类似，是为了监听data中的数据的变化，只要监听的数据一发生变化，它就能执行相应的函数，

//监听data中已经有的数据，当数据变化时触发。
   new Vue({
            el:"#app",
            data: {
                person:{
                    value:"allen"
                }
            },
            watch:{//监听器
                person:{
                    immediate:true,//初始化的时候就监听操作
                    deep:true,//深度监听  内部的属性发生变化了，也会被检测到
                    handler(){
                        console.log("person发生改变了哦...")
                    }
                }
            }
        })

（1）watch属性的名字必须为data中对应数据的名字。
（2）Watch 是一种命令式的解决方案，我们需要自己处理 vue
某个属性依赖要素的变化，根据变化重置这个属性。

3、两者不同
（1）设计模式不同
Computed 是一种声明式的解决方案，我们只需要告诉 vue 某个属性的构成方法，就可以一劳永逸的放手不管了。

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

Watch 是一种命令式的解决方案，我们需要自己处理 vue 某个属性依赖要素的变化，根据变化重置这个属性。

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

（2）响应行为不同
Computed 的响应是 deep 的响应，即在计算过程中用到的对象的属性发生变化，是可以被监听到的。然而，一旦 Computed 没有在模板中使用，vue 是不会为我们计算 Computed 内容的。

computed: { fullName: function () {
// this.name 的属性 firstName/lastName 变化时 fullName 会响应。
return this.name.firstName + ’ ’ + this.name.lastName } }

Watch 的响应默认为非 deep 的响应，即观测的是某个对象的字面量。当然，我们可以为 Watch 设置 deep 响应类型或是监听其属性。

watch: {
  name: function () {
    // this.name 的属性 firstName/lastName 变化时不会触发。
    // TODO
  }
}

4、总结

两者的使用应当是互补的：

在获得较为简单的属性，且用于展示时，用 computed 可以简化书写。

在进行比较复杂的异步操作，或有比较明显的副作用时，用 watch 逻辑更清晰。

另外，需要注意的是，watch 的计算早于同依赖的 computed.