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

In this issue, the editor will bring you about what Vue is advanced. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Now we have a requirement, variable firstName = "hello" and variable lastName = "world". We need to concatenate these two variables to be displayed at the front end. The most basic thing we can think of is:

Vue

{{firstName + "" + lastName}}

{{firstName}} {{lastName}}

Var app = new Vue ({el:'# app', data: {firstName: 'hello', lastName:' world',},})

The above two ways of writing can obviously do this, but the first one we have calculated in the {{}} interpolation expression, which we do not recommend, the second is to write two {{}} interpolation expressions, which looks good, but if we want to concatenate more than one, it will be redundant in the HTML code, and it will be difficult to maintain later. Let's take a look at how to implement it within a method:

Vue

{{fullName ()}} {{time}}

Var app = new Vue ({el:'# app', data: {firstName: 'hello', lastName:' world', time: 1}, methods: {fullName () {console.log ("calculated once"); return this.firstName + "" + this.lastName})

In the above code, we define a fullName method in methods, then put it in HTML through {{}} interpolation expression, and call it directly when the page is loaded. The running result is as follows:

We define a time data when the page is loaded, and when we update this time data, the result is as follows:

We found that when we updated the time data, the fullName method was also called once. This is obviously not ideal.

Let's take a look at the watch method using listeners:

Vue

{{fullName}} {{time}}

Var app = new Vue ({el:'# app', data: {firstName: 'hello', lastName:' world', fullName: 'hello world', time: 1}, watch: {firstName () {console.log ("firstName changed"); this.fullName = this.firstName + "" + this.lastName }, lastName () {console.log ("lastName changed"); this.fullName = this.firstName + "" + this.lastName;})

The results are as follows:

We define two methods in the watch attribute of the Vue instance: firstName and lastName,watch, where the method name is the same as the data variable name in the data attribute, which means that the data will be monitored for changes in real time, and the DOM will be updated in real time if the changes are detected.

Let's first take a look at the changes when updating time data like the methods method:

We can see that the data in firstName and lastName is not called when the time data is updated. When we update the data for firstName and lastName, the results are as follows:

We can see that when we update the data of firstName or lastName, the fullName data will be updated, which means that the data will be cached when the data is mounted on DOM. If the data is not updated, the cached data will continue to be used, and the methods in watch will be called only when the data is updated, which is much better than the methods method.

Let's take a look at the calculation property computed:

Vue

{{fullName}} {{time}}

Var app = new Vue ({el:'# app', data: {firstName: 'hello', lastName:' world', time: 1}, computed: {fullName () {console.log ("calculated once"); return this.firstName + "" + this.lastName;})

The running results are as follows:

We can see that compared with watch, we do not define fullName data in data, but define fullName directly in computed attribute and then return the stitching result of firstName and lastName. When the page is rendered, we can see that the calculation attribute will be taken once from the output result. When we change the time data:

You can see that the method in computed is not called. When we change the data of firstName or lastName, the result is as follows:

From the above results, we can see that the method in computed has been called. This is the desired result. When the firstName and lastName data related to fullName changes, the calculation attributes will be recalculated. When the time data that has nothing to do with fullName changes, the previously cached data will be used. This is exactly the result we want.

Comparing the above three methods, we can see that the methods method is the least ideal. The running results of the listener watch and the calculation attribute computed are the same, but the calculation property computed method is simpler. Therefore, we prefer to use the computed method when both watch and computed methods can be implemented.

But there is a problem with the above watch and computed methods, that is, in watch, we define a fullName data in data. When we change the value of fullName, the DOM will change accordingly, which is the same as the firstName and lastName data changes. But when we do not define fullName in computed, when we change the data of fullName, it is as follows:

We found that DOM has not been updated, which is unfriendly compared with watch. In fact, there are get and set attributes in computed. The fullName method of our computed is changed to the following:

Vue

{{fullName}} {{time}}

Var app = new Vue ({el:'# app', data: {firstName: 'hello', lastName:' world', time: 1}, computed: {fullName: {get () {console.log ("calculated once"); return this.firstName + "+ this.lastName" }, set (value) {console.log (value); var result = value.split (""); this.firstName = result [0]; this.lastName = result [1];})

The running results are as follows:

You can see that when we use get and set, we can change the value of fullName to make DOM updated. When the page is updated, the get method in fullName is first triggered and fullName is returned. When we change time, the firstName and lastName that fullName depends on have not changed, so fullName will fetch the cached value. In the set method of fullName, you can pass a parameter of value. By printing, we can see that the value value is the value of our fullName directly, and we can use this value to assign values to change firstName and lastName. In this way, DOM will be updated in real time when the firstName or lastName on which fullName depends changes.

The above is the editor for you to share what is Vue advanced, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.