Vue中watch和computed的区别

一、二者相同点和不同点

相同：
两者都可以观察页面数据的变化

不同点

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

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

举例说明：

1.在数据变化,会自动调用watch而不调用computed,只有在使用computed的值时才会调用conputed
2.多次使用computed时,如果computed所依赖的属性值没有变化,只有第一次使用会进行计算,之后的每次使用不会重新进行计算,而是会读取缓存
3.连续多次改变属性的值,watch只会执行最后一次

data(){
  return: {
     msg:''
  }
}
watch: {
    msg(val, oldVal){
        console.log("旧值: %s, 新值: %s", oldVal, val)
    }
},

methods: {
    init() {
        this.msg = "第一次改变"
        this.msg = "第二次改变"
        this.msg = "第三次改变"
    }
}

// 结果：下面的代码只会输出一次旧值: 消息消息消息, 新值: 第三次改变

二、详细讲解其功能特点

1、先来看看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 监听。例如用户注册时，检测账号是否可用等…

2，再来看看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('')
    }
}

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

三、个人总结:

1，当数据变化频率不高,但是需要经过复杂计算时,使用computed
2，当数据变化后,需要进行一些操作,使用watch