Vue数据侦听

 

1.Watch

data( ) {
   return {
      'first':1
   }
},
watch: {
   first(newValue,oldValue) {
      console.log('新值--->>>',newValue)
      console.log('旧值--->>>',oldValue)
  }
}

watch内部，直接监听data内部变量即可，常用参数为newValue(新值)，oldValue(旧值)，我们可以把wacth监听理解为，监听的是这一个数据变化的动作，所以我们可以通过这个动作，来获取之前(旧)和之后(新)的数据的不同结果。watch主要用于监控vue实例的变化，它监控的变量必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

2.Computed

data( ) {
   return {
      'first':1
  }
},
computed: {
   test() {
      return this.first+1
   }
}

computed使用方式与watch类似，不同的是，watch是监控data内部变量，而computed是监控自己内部的变量，该变量不在data里面声明，直接在computed里面定义，就可以在页面上进行双向数据绑定展示出结果或者做其他的处理

computed比较适用对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值也跟随发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化时，或减少或增加或删除，总金额都应该发生变化。这里的这个总金额如果使用computed属性计算，那是最好的选择了。

3.Computed与method

假设我们做这样一个results数组

data( ) {
   return {
      results: [
         {name:'English',marks:70},
         {name:'Math',marks:80},
         {name:'History',marks:90}
      ]
   }
}

如果我们想得到数组内总体marks的数据，我们不应该是用filter或expressions来完成这个任务

filters：用于简单的数据格式，在应用程序的多个位置都需要它

expressions：不允许使用流操作或其他复杂的逻辑。他们应该保持简单

这个时候，计算属性就可以派上用场。

computed: {
   totalMarks: function( ) {
      let total = 0
      let _this = this
      for (let i = 0; i<_this.results.length; i++) {
         total += _this.result[i].marks
      }
   }
}

当然，我们还可以使用method计算出总的marks。

在上例的基础上，我们把computed区块中的totalMarks函数整体移到methods中。同时在模板中将{ { totalMarks }} 替换成{ { totalMarks( ) }}。 你最终看到的结果是一样的

虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法totalMarks()方法在每次页面渲染时都被执行一次（例如，使用每一个change）

如果我们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在我们这个示例中，那就是results）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着只要results还没有发生改变，多次访问totalMark计算属性会立即返回之前的计算结果，而不必再次执行函数。

上面两个示例也说明，在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

总结：

computed为响应式运算（只关心运算的结果）

watch为监听data变量变化的一个动作（可以拿到newValue与oldValue处理一些特有的逻辑）

method是更为纯粹的手动定义方法（可以更便捷的扩展开发者自己的思维）