computed

Computed, though written like a function, actually computes properties. It does some computation on the data object of the data, just like getters and setters create an accessor property. It has a feature that Vue does internal caching and only recalculates and triggers rendering if its dependency properties change. Otherwise, the calculation will not be triggered again.

Writing: type: {[key: string] : Function | {get: the Function, the set: the Function}}

new Vue({
  data: {
    user: {
      email: "[email protected]".nickname: "gg".phone: "13710101010"}},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
  // Better to use computed displayName
  template: ` 
      

        {{displayName}} 
       

         {{displayName}} 
        set 
       
 
      
 `.methods: {
    add() {
      console.log("add");
      this.displayName = "mm";
    }
  }
}).$mount("#app");

Copy the code

Note: You do not need to add ()

watch

Watch translates to observe, and in VUE it is a listener that listens (observes) for dependent properties. When the listening property changes, a function is executed.

Writing: {[key: string] : string | Function | Object | Array}

1. Wtach has two attributes:

• Immediate Whether this function is executed on the first render, which is called immediately after listening starts.
• Deep depends on whether the properties inside the object change.

Here is an example of the changing code:

let vm = new Vue({
    data: {
        a: 1.b: {
            c: 2
        },
        d: {
            e: {
                f: 3}}},watch: {
        a(newvalue, oldValue) {
            console.log( Changed 'a')},b: {
            handler: function (v, oldv) {
                console.log(Changed "b")},immediate: true // Call the callback function when listening starts
        },
        'b.c': function (v, oldv) {
            console.log("The biggest change")},d: {
            handler: function (v, oldv) {
                console.log(Changed "d")},deep: true // Listen for any changes in d, d.e, and D.E.F}}})/ / vm. B
vm.a=2 / / a change
vm.b={c:2} / / b changed
vm.b={c:2.x:3} / / b changed
vm.b={c:3} //b changes b.c changes
vm.b.c=100 / / the biggest change
vm.d.e.f=4 / / d
Copy the code

2, $nextTick

It is important to note that watch is an asynchronous function, so if our property needs to listen before performing a change, we can use the $nextTick API.

Here is an example of listening code:

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 }); }}},// Better to use computed displayName
  template: ` 
      

        {{n}} 
       
 
       +1 
       +2 
        1 < / button > < button @ click = "minus2" > 2 < / button > < hr / > < button @ click = "undo" > cancel < / button > < hr / > {{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; // The watch n function is called asynchronously
      this.$nextTick(() = > {
        this.inUndoMode = false;
      });
    }
  }
}).$mount("#app");

Copy the code

conclusion

• Computed is a calculated attribute, and watch is a listener.
• Computed does not need parentheses when invoking values and can be used as attributes. And it automatically caches based on dependencies, meaning that computed values are not recalculated if the dependency does not change.
• Watch has two options, immediate indicating whether to execute this function on the first render, and deep indicating whether to look at deeper changes if we listen on an object. If you need to do something when some data changes, use Watch.