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

In this issue, the editor will bring you about how to use computational attributes in Vue. 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.

Let's take a look at the Vue calculation properties and introduce the basic usage of the Vue calculation properties.

Calculation attribute

Sometimes we put too much logic in the template, resulting in the template being too heavy and difficult to maintain. For example:

{{message.split (') .reverse () .join (')}}

In a situation like this, we have to look at it for a while to realize that we want to display the flipped string of the variable message, and it will be more troublesome if we want to use the flipped string multiple times in the template. Therefore, when we deal with complex logic, we should use computational attributes.

Basic usage

The calculated property is a property in the Vue configuration object and is used as follows:

{{someComputed}} const vm = new Vue (the value returned by {el:'# app', computed: {/ / is the value of the calculated attribute someComputed () {return 'some values'})

For example, if we want to get a flip string of a string, we can use the calculation property to do this:

Original string: "{{msg}}"

Flip the character: "{{reversedMsg}}"

Const vm = new Vue ({el:'# app', data: {msg: 'Hello'}, computed: {reversedMsg: function () {return this.msg.split ('). Reverse (). Join (');})

We can see that the value of reversedMsg depends on the value of msg, so when we change the value of msg, the value of reversedMsg changes accordingly.

Vs method for calculating attributes

In fact, the above functions can also be realized by using methods, such as:

Original string: "{{msg}}"

Flip string: "{{reversedMsg ()}}"

Const vm = new Vue ({el:'# app', data: {msg: 'Hello'}, methods: {reversedMsg: function () {return this.msg.split ('). Reverse (). Join (');})

Although calling a method in an expression can achieve the same effect, there is an essential difference between using evaluation properties and using methods. When using the method, each time the page is re-rendered, the corresponding method is re-executed, such as:

{{name}}

{{reversedMsg ()}}

Const vm = new Vue ({el:'# app', data: {msg: 'Hello', name:' shanshan'}, methods: {reversedMsg: function () {console.log ('method is executed'); return this.msg.split ('). Reverse (). Join (');}}) vm.name = 'duyi'

In the above example, we can see that once the value of name is changed, the page will be re-rendered. At this time, the method executes the string in the console, which means that the function reversedMsg has been executed, but we do not need the method to execute, because the changed data has nothing to do with this function. If the logic in this function is very complex, it is also a consumption for performance.

However, the use of computational properties to do, there will not be such a phenomenon, such as:

Const vm = new Vue ({el:'# app', data: {msg: 'Hello', name:' shanshan'}, computed: {reversedMsg: function () {console.log ('calculation is executed'); return this.msg.split ('). Reverse (). Join (');}}) vm.name = 'duyi'

At this point, you can see that when the data name is reassigned, the calculated property is not executed. Therefore, the most essential difference between the calculation property and the method is that the calculation property is cached based on response dependency, and the value of the calculation property is always stored in the cache. As long as the data data it depends on remains unchanged, each time it accesses the calculation property, it will immediately return the cached result instead of executing the function again. The method is that each time the re-rendering is triggered, the calling method will always execute the function again.

So why do you need caching?

Let's say we have a calculation attribute A that needs to traverse a huge array and do a huge calculation. Then we need to use this computational property A, and if there is no cache, we will execute the function of An again, so the performance overhead becomes very high.

Deep calculation of attributes

Besides being written as a function, the calculation attribute can also be written as an object. There are two properties in the object, getter&setter, both of which are functions, written as follows:

Const vm = new Vue ({el:'# app', computed: {fullName: {getter () {/ / some code}, setter () {/ / some code}) getter read

Earlier, we directly wrote the calculated property as a function, which is the getter function. That is, by default, only getter is the calculated property. The this of getter is automatically bound as a Vue instance.

When will it be implemented?

When we go to get a computed property, the get function is executed.

Const vm = new Vue ({el:'# app', data: {msg: 'Hello'}, computed: {reversedMsg: {getter () {return this.msg.split (') .reverse (). Join ('');}) setter setting

Optionally, the set function executes when a computed property is reassigned. Parameter: the value to be reset. The this of setter is automatically bound as a Vue instance.

Const vm = new Vue ({el:'# app', data: {msg: 'Hello', firstStr:''}, computed: {reversedMsg: {getter () {return this.msg.split ('). Reverse (). Join (');}, setter (newVal) {this.firstStr = newVal [0];})

Note that even if a value is assigned to the calculated property, the calculated property does not change, and again, the calculated property is recalculated only when the dependent responsive property changes.

Exercise _ name filter personArr: [{name:', src: '.jpg', des: 'cervical vertebra is not good', sex: 'masked, id:' 056482'}, {name:', src: '.jpg', des: 'who am I', sex: 'foul, id:' 157894'}, {name:'' Src: '.jpg', des:'I look good', sex: 'faded, id:' 2849245}, {name:', src: '.jpeg', des: 'you haven't seen a strange face', sex: 'masked, id:' 348515}, {name:', src: '.jpeg', des: 'Guapi Liu' Sex: 'jpg, id:' 478454'}] exercise _ full selection courseList: [{poster: '.jpg', title:'', price: 1299, cart: 1, id: 0}, {poster: '.jpg', title:'', price: 1148, cart: 1, id: 1595402664708}, {poster: '.jpg', title:'' Price: 1, cart: 1, id: 1596305473062}, {poster: '.jpg', title:'', price: 1, cart: 1, id: 1595413512182}, {poster: '.jpg', title:'', price: 12798, cart: 1, id: 1596302161181}, {poster: '.jpg', title:'', price: 1, cart: 1 Id: 1596300025301,},] this is how to use computational properties in Vue shared by the editor. 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.