Computing attributes of Vue. js Learning

The Inline expression of Vue. js is very convenient, but its most suitable use scenario is simple Boolean operations or String concatenation. If more complex logic is involved, you should use the computing attribute. The following article describes the computing attributes in Vue. js. You can refer to them for reference. Preface

The calculation attribute is used to declare that a value depends on other values. When you bind data to a computing attribute in the template, Vue updates the DOM when any value on which it depends changes the computing attribute. This feature is very powerful and makes your code more declarative, data-driven, and easy to maintain.

When vue is used, all the data on the template is put into the data attribute, sometimes, when there are more variables in the data attribute, I think that some variables are directly written to the template only once. Later I saw colleagues in the same group using the computed attribute, I checked the api again and found that computed is the best practice in this case.

1. computed can keep the template clear. In the template, try to only display and bind it, instead of adding logical operations.

2. Another advantage of using computed is that it will automatically change with changes to other data attributes.

For example, an example in the official document:

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }})vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName})vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val})

If you use watch, code redundancy is generated. For example, the status changes in the live video can be used to calculate whether to display upper-layer attributes such as videos.

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () {  return this.firstName + ' ' + this.lastName } }})

Summary

The above is all about the computing attributes of Vue. js. I hope this article will help you in your study or work. If you have any questions, please leave a message.

For more information about Vue. js computing attributes, see PHP!