computed vs watch

computed（计算属性）

写法：

// 模板中使用
<div>{{fullName}}</div>

// 简单写法 （写成方法）
computed:{
  fullName(){
    console.log('get被调用');
    return this.firstName + '-' + this.lastName
  }
}

// 完整写法 （写成对象）
computed: {
  fullName: {
    // get有什么作用？当有人读取fullName是，get就会被调用
    // get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化
    get(){
      console.log('get调用了');
      return this.firstName + '-' + this.lastName
    },
    // 当数据发生修改的时候，调用set
    set: function (name) {  
      this.firstName = name
    }
  }
}

watch（监听属性）

写法：

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',  
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 （写成配置项）
    c: {  
      handler: function (val, oldVal) { /* ... */ },  
      deep: true  
    }, 

    // 该回调将会在侦听开始之后被立即调用  
    d: {  
      handler: 'someMethod',  
      immediate: true  
    },  

    // 你可以传入回调数组，它们会被逐一调用  
    e: [  
      'handle1',  
      function handle2 (val, oldVal) { 
        /* ... */ 
      },  
      {  
        handler: function handle3 (val, oldVal) { 
          /* ... */ 
        },  
          /* ... */  
      }  
    ],  

    // watch vm.e.f's value: {g: 5}  
    'e.f': function (val, oldVal) { 
             /* ... */
           }  
    }  
  })  
vm.a = 2 // => new: 2, old: 1

computed 和 watch的区别

对于computed:

• 支持缓存，只有依赖项发生变化的时候才会重新计算
• 不支持异步，如果computed中存在异步操作，无法做到监听数据的变化，因为computed是靠return返回值获取数据的
• computed的值默认是走缓存，它是基于它们存在于响应式中的值进行缓存的，也就data中的值，或者是父组件传递过来的props中的数据
• 顾名思义，一个属性是通过其他属性计算得到的，一般会使用computed

对于watch：

• 不支持缓存，数据变化时，就会触发对应的操作

• 支持异步监听，不需要靠返回值

• 监听的方法接收两个参数，第一个参数是最新的值，第二是变化之前的值

• 监听的数据必须是data中声明的或者父组件传递过来的props,如果写成配置项的形式，可以使用以下属性

  • immediate：组件加载立即触发回调函数（也就上面写的 handler(val, oldVal) {}）
  • deep: 深度监听，但是在复杂数据类型中的，例如数组中的对象发生变化，deep是无法监听到的

• 当你要执行异步操作，或者需要在响应式不断变化的时候实现点什么东西的时候，这时候就需要使用watch

总结

• computed计算属性：依赖其它属性值，并且做对应的缓存，只有依赖的属性值发生了变化，才会重新计算computed的值
• watch侦听器：更多用于观察，无缓存性，可以看做某些数据的监听回调，当监听的数据一旦发生变化就会执行回调从而实现你后续的操作