Get to know computed and watch in Vue and talk about their differences

This article will introduce you to computed and watch in Vue, and introduce the difference between computed and watch. I hope it will be helpful to you.

1. computed

1. Purpose: The calculated attribute is the calculated attribute

2. Benefits of computed properties: It can turn some properties that are calculated based on other properties into one property

computed has a dependency cache, if computed’s dependency If the attribute does not change, computed will not be recalculated. If a piece of data depends on other data, then design the data to be computed. [Related recommendations: "vue.js Tutorial"]

Example (user name display):

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, cache: If the dependent properties do not change, they will not be recalculatedgetter/setterCache will not be done by default, Vue has done special processing

How to cache? You can refer to the following examples:

2. watch (listening/listening)

1. Purpose : When the data changes, execute a function, watch is the perfect implementation of history A function (method) of the function

Example (undo):

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");

Added immediate: true, watch will be triggered during one rendering

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 += &#39;hi&#39;">obj.a + &#39;hi&#39;</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler(){
        console.log("obj 变了");
      },
      deep:true
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

• Syntax 1:

#The outer function of the above arrow function is the global scope, and this of the global scope is Global object window/global, so you cannot get this.n/this.xxx here, so arrow functions must not be used in watch

• Syntax 2:

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

The $ is added in front of watch to avoid duplication with a data name called watch

2. What does deep:true do?

If object.a changes, does object count as a change? If you need the answer to be [has changed], use deep:true If you need the answer to be [has not changed], use deep:false

deep means not to look inside, but to look deeply. true means to look deeply. The default is false (only look at the surface address).

Not only needs to compare the address of obj, but also needs to compare if any data in it changes, it must be considered that obj has changed.

3. Summary

• computed: It means calculated properties
• watch: It means monitoring
• watch supports asynchronous code but computed does not.

computed This value does not need to be added when calling Parentheses, it will be automatically cached based on dependencies, that is to say, if the dependencies remain unchanged, the value of computed will not be recalculated.

watch It has two options, the first is immediate, which means that this function should be rendered the first time it is executed; the other is deep , means if we want to monitor an object, do we want to see the changes in its properties?

• If a data depends on other data, then design the data as computed;

• If you need Do something when a certain data changes, and use watch to observe the changes in this data.

The above is the difference between computed and watch.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Get to know computed and watch in Vue and talk about their differences. For more information, please follow other related articles on the PHP Chinese website!