【技术】Vue中watch和computed的区别

一、先来看看watch

1.watch对数据的监控观察

var vm = new Vue({
    //......
    data: {
      name: "张三"
    },
    watch: {
      "name": function() { 
        //..... 
      }
    }
  })

上面的代码，我们在data中定义了name的值。而下面的watch也对应键名定义了name，值为一个函数。此时表示watch当前已经监听了data中的name，当name的值发生改变时，则立即执行对应的函数。

此函数中还规定了两个参数来方便我们取得数据

watch: {
       "name": function( newVal, oldVal ) { 
         //..... 
      }

第一个参数（newVal）：数据改变后的值
第二个参数（oldVal）：数据改变之前的值

2.watch监听路由的改变

watch不仅可以监听data中的数据，还可以监听路由的变化。
在Vue实例中，使用$route.path监听路由地址的改变

var vm = new Vue({
    //......
    watch: {
      "$route.path": function() { }
    }
  })

同时，在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时，检测账号是否可用等...

二、再来看看computed

定义：是一个计算属性,类似于过滤器,对绑定到view的数据进行处理

computed是Vue内部规定的【计算属性】，与watch很像，也可以用来监听数据的获取和改变。

//html
  <div id="app">
    <input type="text" v-model = "fis">
    <input type="text" v-model = "thir">
    {{ sec }}
  </div>
//js
  var vm = new Vue({
    el:'#app',
    data:{
      fis: 3,
      thir: 5,
    },
    computed:{
      sec: {
        get: function(){ return this.thir}, //只要function中的数据（这里是thir）发生变化，就会触发函数
        set: function(val){ return 1}
      }
    }
  })

上面的代码中，定义了computed，监听了sec（属性），只要当函数定义的内部数据发生变化，即会触发函数。函数返回的值便是sec的新值

当sec属性发生改变，触发set函数，若sec中只有一个函数，则会默认定义了get
set函数中可以传一个参数，为当前数据新的值

一般使用场景
使用计算属性简化模板

//简化前
{{msg.split('').reverse().join('')}}

//简化后
HTML:
{{revserseString}}

JS:
computed: {
    revserseString: function (){
        return this.msg.split('').reverse().join('')
    }
}

上面定义了颠倒字符串的方法，使用计算属性来简洁了模板。

4.二者的区别
computed
在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。
1、支持数据的缓存。
2、函数内部的数据改变也会触发。
3、不支持异步，当computed内部有异步操作时computed无效
4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般用computed
5、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

watch
watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些操作
1、不支持缓存
2、支持异步
3、只可以设置一个函数，可以带有两个参数
4、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作