阅读 197

简述 computed 和 watch 的区别

computed -计算属性

用途:被计算出来的属性就是计算属性

用户名展示


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

Vue.config.productionTip = false;

new Vue({
    data:{
      user:{
       email: "123@qq.com",
        nickname: "方方",
        phone: "13888888888"
        }
    },
    template: `
    <div>
			{{ user.nickname || user.email || user.phone}}
    </div>
  `

}).$mount("#app");

复制代码

使用computed计算属性来改进

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

Vue.config.productionTip = false;

new Vue({
    data:{
      user:{
       email: "123@qq.com",
        nickname: "方方",
        phone: "13888888888"
        }
    },
     computed: {
    displayName(){
     
        const user = this.user;
        return user.nickname || user.email || user.phone;
      }

  },
    template: `
    <div>
			{{displayName}}
    </div>
  `

}).$mount("#app");


复制代码

computed计算属性最终版


// 引用完整版 Vue,方便讲解
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    user: {
      email: "fangyinghang@qq.com",
      nickname: "方方",
      phone: "13812312312"
    }
  },
  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");

复制代码

列表展示

watch监听

用途:当数据变化时,执行一个函数

// 引用完整版 Vue,方便讲解
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");

复制代码

computed 和 watch 的区别

computed看上去是方法,其实是计算属性。它依赖数据动态显示新的计算结果,计算结果被缓存。computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算

watch是一个data的数据监听回调,当依赖的data的数据变化,执行回调。在方法中会传入 newVal 和 oldVal。可以提供输入值无效,提供中间值 特场景。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情,使用watch。

文章分类
前端
文章标签