Vue中watch和computed的区别

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 监听。例如用户注册时，检测账号是否可用

3.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中的数据，当数据变化时，触发其他操作

 

原文：https://blog.csdn.net/pspxuan/article/details/104632916?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control