Vue. js computing attributes computed and watch (5)

This article describes Vue in detail. js computing attributes computed and watch have a certain reference value. It is very convenient for interested friends to refer to binding expressions in the template, but they are only used for simple operations. The template is used to describe the view structure. Adding too many logic in the template will make the template too heavy and difficult to maintain. This is why Vue. js limits the binding expression to one. If you need more than one expression logic, you should use ** calculation attribute **.

The computed attribute of the Vue instance.

    
Original message {message }}
   
Calculated message {ComputedMessage }}
  

Js Code

var myVue = new Vue({    el: ".test",    data: {      message:12    },    computed:{      ComputedMessage:function () {        return this.message+10;      }   }  });

The page displays 12 and 22

The above method is a buffer implementation effect. This implementation method depends on its slowness. The calculated attribute is only dependent on the message) the value is retained only when the message is changed. This means that as long as the message is not changed, the ComputedMessage will not be re-executed for multiple accesses ..

After calculation, the ComputedMessage attribute always depends on message.

Achieve the same effect by calling Functions

    
Original message {message }}
    
Calculated information {MessageFunction ()}}
  

Js Code

var myVue = new Vue({    el: ".test",    data: {      message:12    },    methods:{      MessageFunction:function () {        return this.message+10;      }   }  });

The result is the same as the preceding one, but it is re-called every time it is re-rendered.
Therefore, when using the above two methods, you must first determine whether you need to use the cache

Use watch of vue instance

I don't understand this yet.
However, using computed is more convenient and convenient.

   
Original information {fullName }}
 

Js Code

var myVue = new Vue({   el: ".test",   data: {     firstName:"fur",     lastName:"bool"  },   computed:{     fullName:function () {       return this.firstName+this.lastName     }   } });

In addition, you can set the setter getter attribute in the computed attribute to be available by default.

Demonstrate the call process of set and get

   
Original information {fullName }}
   Test 

Js Code

var myVue = new Vue({    el: ".test",    data: {      firstName:"fur",      lastName:"bool",      fullName:"sasas dsdsd dsds"   },    computed:{      fullName:{        get:function () {          console.log("get")          return this.firstName+this.lastName        },        set:function(value){          var names=value.split(" ");          this.firstName=names[0];          this.lastName=names[names.length-1];          console.log("set");        }      }     },     methods:{       fu:function () {         myVue.fullName="sasas dsdsd dsds";         console.log(myVue.firstName);   //sasas         console.log(myVue.lastName);  //dsds       }     }   });

First, get is output;

When you click the button to assign a value to fullName, call set first and then call the get method.

Custom Watcher

Although the computing attribute is very suitable in most cases, you may need to customize a watcher. This is because you want to execute asynchronous operations and other operations in response to data changes.

The above are the Vue. js computing attributes computed and watch. For more information, see PHP Chinese Network (www.php1.cn )!