vue的computed和watch的区别

Posted 2023-03-30 技术靳

一、总述

computed和watch都是vue框架中用于监听数据变化的属性

二、computed计算属性

1. 如果函数所依赖的属性没有发生变化，从缓存中读取
2. 必须有return返回
3. 使用方法和data中的数据一样，但是类似一个执行方法

三、watch监听器

1. watch的函数名必须和data中的数据名一致
2. watch中的函数有俩个参数，新旧
3. watch中的函数是不需要调用的
4. 只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用
5. immediate:true 页面首次加载的时候做一次监听

四、区别

1. 功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调
2. 是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3. 是否调用return：computed必须有；watch可以没有
4. 使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5. 是否支持异步：computed函数不能有异步；watch可以

Vue 中computed 和 watch 的区别

前言

在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和computed这两个属性，既然都是数值改变触发改变的属性，他们之间又有什么异同呢？

computed

• computed 是计算属性，它会根据你所依赖的数据动态显示新的计算结果。
• 计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
• 通过计算出来的属性不需要调用直接可以在 DOM 里使用

例子

var vm = new Vue({
  el: \'#app\',
  data: {
    message: \'red\'
  },
  template: `
 <div> <p>我是原始值: "{{ message }}"</p> <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用 </div> `,
  computed: {
    // 计算属性的 getter     computedMessage: function () {
      // `this` 指向 vm 实例       return this.message.split(\'\').reverse().join(\'\')
    }
  }
})

结果：
我是原始值: "red"
我是计算属性的值: "der"

如果不使用计算属性，那么 message.split(\'\').reverse().join(\'\') 就会直接写到 template 里，那么在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响

而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算

所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性

watch

• 一个对象，键是 data 对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个 val （修改后的 data 数据），一个 oldVal（原来的 data 数据）

Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
 <div> <button @click="n += 1">n+1</button> <button @click="obj.a += \'hi\'">obj.a + \'hi\'</button> <button @click="obj = {a:\'a\'}">obj = 新对象</button> </div> `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深     },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用     }
  }
}).$mount("#app");

注意：不应该使用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例

• deep 控制是否要看这个对象里面的属性变化
• immediate 控制是否在第一次渲染是执行这个函数
• vm.$watch(\'data属性名\', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
      console.log("n 变了");
},{deep: true, immediate: true})

两者区别

相同点：

两者都是观察页面数据变化的。

不同点：

• computed 只有当依赖的数据变化时才会计算, 会缓存数据。
• watch 每次都需要执行函数。watch 更适用于数据变化时的异步操作

总结

• 如果一个数据需要经过复杂计算就用 computed
• 如果一个数据需要被监听并且对数据做一些操作就用 watch