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

This article mainly explains "how to understand computational attributes and attribute listening in Vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand computational attributes and attribute snooping in Vue".

Catalogue

1. Calculation attribute

Grammar: 1. Abbreviated method:

Grammar: 2. Complete writing:

two。 Monitor (listen) attribute

1. Monitoring property watch:

two。 Depth monitoring

3. Differences and principles

Summary

1. Calculation attribute

Define

Calculation attribute: the property to be used does not exist. To calculate from the existing property, the calculation attribute needs to have a new configuration item computed.

For Vue, the data in data are attributes. Whenever the data in Vue changes, the template will be re-parsed, and the method in the interpolation syntax will be called again.

Principle

The underlying layer relies on the getter and setter provided by the Objcet.defineproperty method.

When does the get function execute?

It is executed once on the first read.

It will be called again when the dependent data changes.

advantage

Compared with the methods implementation, there is an internal cache mechanism (reuse), which is more efficient and convenient for debugging.

Remarks

The calculation attribute will eventually appear on the vm (Vue instance) and can be read and used directly.

If the calculation property is to be modified, the set function must be written to respond to the change, and the data that will cause the calculation to depend on will change in the set.

Grammar: 1. Abbreviation: computed: {"calculation property name" () {return "value"}}

Requirements: find the sum of 2 numbers to be displayed on the page

{{num}}

Export default {data () {return {a: 10, b: 20}}, / / calculation attribute: / / scenario: the value of a variable / * Syntax: computed: {calculate attribute name () {return value}} * / / Note: both the calculated attribute and the data attribute are variables-cannot be duplicated / / Note 2: variable changes within the function The result will automatically recalculate and return computed: {num () {return this.a + this.b} Syntax: 2. Complete writing:

The calculation property is written in the format of the configuration object: the get and set functions are used in the object

The role of get: when someone reads fullName, get is called and the return value is used as the value of the evaluation property (get must write return)

When will get be called? 1. When reading fullName for the first time. two。 When the dependent data changes.

Get () {console.log ('get was called') / / console.log (this) / / the this here is vm (Vue instance) return this.firstName +'-'+ this.lastName}

Set: when the value of the calculation attribute is modified, the called parameter receives the new value passed in.

... Computed: {what is the purpose of fullName: {/ / get? When someone reads fullName, get is called, and the return value is called as the value of fullName / / get. 1. When reading fullName for the first time. two。 When the dependent data changes. Get () {console.log ('get was called') / / console.log (this) / / the this here is vm return this.firstName +'-'+ this.lastName}. When will set be called? When the fullName is modified. Set (value) {console.log ('set',value) const arr = value.split (' -') this.firstName = arr [0] this.lastName = arr [1]}}) 2. Monitor (listen) attribute

Switch weather 1. Monitoring property watch:

When the monitored attribute changes, the handler callback function is called automatically to perform related operations.

The property of monitoring must exist before it can be monitored!

. / / write 1. Input watch configuration to listen for ishot attribute watch: {isHot: {immediate:true, / / Let handler call / / handler when initialization? When the isHot changes. Handler (newValue,oldValue) {console.log ('isHot has been modified', newValue,oldValue)}) / / 2. Monitor vm.$watch via vm.$watch ('isHot', {immediate:true, / / let handler call it when initializing. When will false / / handler be called by default? When the isHot changes. Handler (newValue,oldValue) {/ / has two parameters, one is the new value and the other is the old value console.log ('isHot has been modified', newValue,oldValue)}) 2. Depth monitoring

In-depth monitoring:

1) by default, watch in Vue does not monitor changes in the internal values of objects (layer 1).

2) configure deep:true to monitor the change of the internal value of the object (multi-tier).

Note:

1) Vue itself can monitor the change of the internal value of the object, but the watch provided by Vue cannot by default!

2) when using watch, we decide whether to use in-depth monitoring according to the specific structure of the data.

Data: {isHot:true, numbers: {anumbers 1}}, watch: {/ / monitor the change of an attribute in the multi-level structure (the original is written in quotation marks, the abbreviation may not be added, but in this case Otherwise, an error will be reported) / * 'numbers.a': {handler () {console.log (' a has been changed')} * / / monitor for changes in all attributes in the multi-level structure numbers: {deep:true, / / if this is not enabled That is to monitor whether the address of numbers has changed handler () {console.log ('numbers changed')}

Monitoring Properties-abbreviation

Can be abbreviated when there is only handler () in the monitoring property and no other configuration items need to be opened.

Watch: {isHot (newValue,oldValue) {console.log ('isHot modified', newValue,oldValue,this)}} / * vm.$watch ('isHot',function (newValue,oldValue) {console.log (' isHot modified', newValue,oldValue,this)}) * / 3. Differences and principles

The difference between computed and watch

Watch can accomplish all the functions that computed can accomplish.

The functions that can be accomplished by watch may not be accomplished by computed, for example, watch can operate asynchronously.

Two important small principles

All functions managed by Vue are best written as normal functions, so that the point of this is the vm or component instance object.

All functions not managed by Vue (callback function of timer, callback function of ajax, callback function of Promise) had better be written as arrow function, so that the point of this is vm or component instance object.

Watch: {firstName (val) {setTimeout (() = > {console.log (this) / / vue instance object. If ordinary function is used, Window this.fullName = val +'-'+ this.lastName}, 1000) }, lastName (val) {this.fullName = this.firstName +'-'+ val}} Thank you for reading. This is the content of "how to understand Computational attributes and attribute snooping in Vue". After the study of this article, I believe you have a deeper understanding of how to understand Computational attributes and attribute snooping in Vue. The specific use situation still needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.