vue的watch 和 computed 的区别

watch和computed的区别是：

• watch

  • 不支持缓存，数据变，直接会触发相应的操作
  • watch 支持异步
  • 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值
  • 当一个属性发生变化时，需要执行对应的操作；一对多
  • 监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据，当数据变化时，触发其他操作，函数有两个参数
    用法：

      watch: {
        //第一种用法
        obj: {
          handler(newName, oldName) {
            console.log('obj.a changed');
          },
          immediate: true,//组件加载立即触发回调函数执行
          deep: true//深度监听，
        },
        //第二种用法
        'obj.a': {
            handler(newName, oldName) {
              console.log('obj.a changed');
            },
            immediate: true,
            // deep: true
        },
        //第三种用法
        "name": function( newVal, oldVal ) {
        //.....
        },
        //还可以监听路由的改变
        "$route.path": function() { }
      }
    

• computed

  • 最重要的一点是，其有缓存，只有依赖数据发生改变，才会重新进行计算
  • 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化
  • 当一个属性发生变化时，需要执行对应的操作；一对多
  • 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前(old)的值
  • 用来监控自己定义的变量，该变量不在 data 里面申明，直接在 computed 里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其它处理；computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值就发送变化；举个例子：购物车里面的商品列表和总金额之间的关系，子要商品列表里面的商品数量发生变化，或减少增加或三处商品，总金额都应该发生改变。
    用法：

       computed:{
        //第一种用法
        sec: {
          get: function(){ return this.thir}, //只要function中的数据（这里是thir）发生变化，就会触发函数
          set: function(val){ return 1}
        },
        //第二种用法
        revserseString: function (){
          return this.msg.split('').reverse().join('')
        }
      }