Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use computational properties and listeners in Vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use computational properties and listeners in Vue.

In Vue, we usually bind expressions in templates, which are used to describe the view structure. If there are too many logical statements in the expressions in the template, the whole template will become particularly bloated, readability and maintainability will be reduced, so to simplify the logic, we will use computational properties.

Basic usage:

Computed: {A:function () {return funding}}

If you have studied object-oriented languages, you should know that one of the object-oriented standards, encapsulation, requires getter and also needs setter, but the above writing actually only writes getter but not setter.

Then we can write it differently.

Computed: {A: {get:function () {return Barric} set:function (newVal) {var names=newVal.splir ('') this.B=names [0] this.C=names [1]}

If you write it this way, it will be much clearer.

At this time, it may be strange that computing can also be done by means of performance.

That is,

Methods: {A: function () {return funding}}

In fact, computational properties are cached based on their responsive dependencies, while methods are not cached

The cache of computing attributes also has its disadvantages. When repeated calls, some redundant steps will occur, resulting in a large number of unnecessary operations.

That's when you need it.

Cache:false

Turn off caching

Let's take a look at his caching method. Computational properties are dependent on the data in data. If the data changes, it will change accordingly, which brings us to another thing: listeners.

What is a listener? The listener is used to listen for changes in data, and if the data changes, it triggers the binding method.

Listeners have their own application scenarios: asynchronous or expensive operations when data changes are executed

Basic use:

Watch: {firstN:function (val) {this.A=val+this.C}}

Listeners are easy to repeat than computed properties, so Vue also suggests that it is usually better to use computed properties rather than watch

At this point, I believe you have a deeper understanding of "how to use computational properties and listeners in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.