Vue. js computing attributes computed and watch (5)

Source: Internet
Author: User
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 )!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.