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

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

一、computed

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

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

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

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

示例（用户名展示）：

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: `    
      {{displayName}}      
      {{displayName}}      set      
    
  `,  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: `    
      {{n}}      
      +1      +2      -1      -2      
      撤销      
      {{history}}    
  `,  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: `    
      n+1      obj.a + 'hi'      obj = 新对象    
  `,  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里面是绝对不能使用箭头函数的

语法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，聊聊它们的区别的详细内容，更多请关注【创想鸟】其它相关文章！