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

This article mainly introduces "what is the method of calculating attributes in Vue". In daily operation, I believe that many people have doubts about the method of calculating attributes in Vue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "what is the method of calculating attributes in Vue?" Next, please follow the editor to study!

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 screening

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'm good-looking', sex: 'good-looking, id:' 2849245}, {name:', src: '.jpeg', des: 'you haven't seen a strange face', sex: 'masked, id:' 348515'}, {name:', src: '.jpeg', des: 'melon peel Liu', sex:'m' Id: '478454'}]

Exercise _ full selection of goods

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,},]

Knowledge point expansion:

Instance expansion

{{reverseMes}} let vm1 = new Vue ({el:'#app1', data: {mes:'hello'}}) let vm2 = new Vue ({el:'#app2' Computed: {reverseMes () {/ / use the mes of the data data center in the instance vm1 to reverse the string operation return vm1.mes.split ('') .reverse () .join ('')})

For the data in the instance vm1, the vm2 calculation property can also be used

Custom evaluation attributes can be used not only in interpolation expressions, but also in v-bind: property bindings, to do some style transformations, and so on.

At this point, the study on "what is the method of using computational properties in Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.