认识Vue中的computed 和 watch，聊聊它们的区别-Vue.js-PHP中文网

认识Vue中的computed 和 watch，聊聊它们的区别

青灯夜游

发布： 2021-12-07 19:20:50

转载

2268人浏览过

本篇文章带大家认识vue中的computed 和 watch，介绍一下computed 和 watch的区别，希望对大家有所帮助。

认识Vue中的computed 和 watch，聊聊它们的区别

一、computed

1、用途：被计算出来的属性就是计算属性

2、计算属性的好处：它可以让一些是根据其他属性计算而来的属性变成一个属性

computed有一个依赖缓存，如果computed的依赖属性没有变化，那么computed就不会重新计算。如果一个数据依赖于其他数据，那么把这个数据设计为 computed。【相关推荐：《vue.js教程》】

立即学习“前端免费学习笔记（深入）”；

示例（用户名展示）：

Vue.config.productionTip = false;

new Vue({
  data: {
    user: {
      email: "jade@qq.com",
      nickname: "jade",
      phone: "18810661088"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  // DRY don't repeat yourself
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "圆圆";
    }
  }
}).$mount("#app");

登录后复制

3、缓存：如果依赖的属性没有变化，就不会重新计算getter/setter默认不会做缓存，Vue做了特殊处理

如何缓存？可以参考以下示例：

二、watch(监听/侦听）

1、用途：当数据变化时，执行一个函数，watch是完美实现历史功能的一个函数（方法）

示例（撤销）：

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    history: [],
    inUndoMode: false
  },
  watch: {
    n: function(newValue, oldValue) {
      console.log(this.inUndoMode);
      if (!this.inUndoMode) {
        this.history.push({ from: oldValue, to: newValue });
      }
    }
  },
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{n}}
      <hr />
      <button @click="add1">+1</button>
      <button @click="add2">+2</button>
      <button @click="minus1">-1</button>
      <button @click="minus2">-2</button>
      <hr/>
      <button @click="undo">撤销</button>
      <hr/>

      {{history}}
    </div>
  `,
  methods: {
    add1() {
      this.n += 1;
    },
    add2() {
      this.n += 2;
    },
    minus1() {
      this.n -= 1;
    },
    minus2() {
      this.n -= 2;
    },
    undo() {
      const last = this.history.pop();
      this.inUndoMode = true;
      console.log("ha" + this.inUndoMode);
      const old = last.from;
      this.n = old; // watch n 的函数会异步调用
      this.$nextTick(() => {
        this.inUndoMode = false;
      });
    }
  }
}).$mount("#app");

登录后复制

加了immediate: true ，一次渲染的时候会触发watch

Vue.config.productionTip = false;

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(){
        console.log("obj 变了");
      },
      deep:true
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

登录后复制

语法1:

上面箭头函数的外层的函数是全局作用域，全局作用域的this就是全局对象window/global,所以你无法在这里获取this.n/this.xxx,所以，watch里面是绝对不能使用箭头函数的

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

语法2:

vm.$watch('xxx',fn,{deep:...,immediate:...})

登录后复制

watch前面加$这样的写法是为了避免和一个叫watch的data名重复

2、deep:true是干什么的？

如果object.a变了，请问object算不算也变了如果需要答案是【也变了】，就用deep:true如果需要答案是【没有变】，就用deep:false

deep就是往不往里面去看，去深入的看，true就是深入进入看，默认是false(只看表层的地址）。

不光要比较obj的地址，而且要比较里面任何一个数据变了，都要认为是obj变了。

三、总结

computed:就是计算属性的意思
watch:就是监听的意思
watch 支持异步代码而computed不行

computed这个值在调用的时候，不需要加括号，它会根据依赖自动缓存，就是说如果依赖不变，这个computed的值就不会重新再计算。

watch它有两个选项，第一个是immediate,表示在第一次执行时要渲染这个函数；另一个是deep,意思是如果我们要监听一个对象，是否要看它里面属性的变化。

如果一个数据依赖于其他数据，那么把这个数据设计为computed;
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据的变化。

以上，就是computed和watch的区别。

更多编程相关知识，请访问：编程入门！！

以上就是认识Vue中的computed 和 watch，聊聊它们的区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue的v-bind和v-on的语法糖分别是什么？学习Vue.js的最佳实践博客有哪些 Vue的异步更新队列是如何工作的？ Vue事件处理如何绑定？@click和v-on有什么区别？ Vue中computed和watch的使用场景有什么区别？