Vue 中 computed ,watch,methods 的异同

methods,watch和computed都是以函数为基础的.

computed 和 watch 都可以观察页面的相应式数据的变化。当处理页面的数据变化时，我们有时候很容易滥用watch， 而通常更好的办法是使用computed计算属性，而不是命令式的watch回调。

1、computed 计算属性

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

适用场景：一个数据受多个数据影响。

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

2、watch  (使用watch函数，当数据改变时自动引发事件)

watch是一个对象，键是  需要观察的表达式，值是  对应回调函数，或是方法名，或者包含选项的对象。

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性，而且在callback中会返回两个对象，分别是oldValue和newValue.顾名思义，这两个对象就是对象发生变化前后的值。

适用场景：一个数据影响多个数据。

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

示例：

//第三个表单的值 是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化

<div id="myDiv">
　　<input type="text" v-model="firstName"> 
　　<input type="text" v-model="lastName">
　　<input type="text" v-model="fullName">
</div>

//js: 利用watch方法 来写

new Vue({
 el: '#myDiv',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 },
 watch: {   //键是  需要观察的表达式，值是  对应回调函数
  firstName: function (val) {   //firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法 
   this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
   this.fullName = this.firstName + ' ' + val
  }
 }
})

//js: 利用computed 来写
new Vue({
   el:"#myDiv",
     data:{
       firstName:"Den",
       lastName:"wang",

     },
     computed:{
       fullName:function(){
         return this.firstName + " " +this.lastName;
       }
     }
 })

 

总结

1、watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2、对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

3、computed在数据未发生变化时，优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。

watch和computed各自处理的数据关系场景不同

・watch方法每次只能监听一个data值的变化

・而计算属性可以同时监听多个data值的变化，且用计算属性可以简化watch中重复的代码

 

不能够触发监听的

1、数组

修改某个下标的某个属性的值

使用原生delete删除某个属性

对某个下标新增一个属性（不使用$set）

对某个下标重新赋值

2、对象

修改某个属性的值（但是会触发这个属性的监听）

新增一个属性（不使用$set）

原生delete删除某个属性