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

How to understand the snooping properties of Vue, in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Vue snooping properties what are snooping properties?

The so-called monitoring is to listen to and respond to changes in the state or properties of built-in objects, listening to properties, which means that you can monitor changes in other data.

What is the difference between snooping properties and computational properties?

After the value of the dependent property is changed, the result of the recalculation is updated DOM, which will be cached.

The property listens for the property value and executes the corresponding function when the defined value changes.

The main differences in use are:

Calculation properties cannot perform asynchronous tasks. Calculation properties are generally not used to request from the server or perform asynchronous tasks, because it may take a long time and our calculation properties need to be updated in real time. So this asynchronous task can be done with the listening property.

In a word: what can be achieved by computed can be achieved by watch, and what can not be achieved by computed, so can watch.

Use of monitoring properties

Using the watch configuration item, write the property to be monitored in the configuration item. Each change in the property value will trigger a callback of the handler function, and you can also monitor the change of the calculated property.

Example:

Monitor the changes in the input box

Code

Me: friend 1 friend 2export default {data () {return {name:' Romantic programmer', friends: {friend_1:' Zhang San', friend_2:' Li Si'}, watch: {name: {handler (newValue,oldValue) {/ / newValue New value The value before oldValue changes console.log (newValue,oldValue) this.friends.friend_1=' Wang Wu'}, / / monitors the change of an attribute in the multi-level structure 'friends.friend_1': {handler (newValue,oldValue) {console.log (newValue,oldValue)}},' friends.friend_2': {handler (newValue,oldValue) {console.log (newValue) OldValue)},} Deep monitoring

When our object has a multi-layer structure, we want to listen to a lot of properties of the object, to avoid writing a separate property, this time to use in-depth monitoring.

In the watch configuration, in the monitoring property object, configure deep to be set to true to listen for changes in the values of multi-level objects or arrays

Watch: {/ / Monitor the changes of all attributes in the multilevel structure friends: {handler (newValue,oldValue) {console.log (newValue,oldValue, "aa")}, deep:true, / / enable deep snooping}}

Note: there is a problem here: the phenomenon of the same new and old values will occur during deep monitoring?

Official explanation:

When you mutate (not replace) an object or array, the old values are the same as the new values because their references point to the same object / array. Vue does not keep a copy of the pre-mutation value.

It leads to a change in the pointer. In my js deep copy, can't you? the article talks about data storage.

Call immediately

The same place as the deep configuration.

Setting immediate to true will immediately trigger the current handler callback

Watch: {name: {handler (newValue,oldValue) {/ / newValue new value, value before oldValue change console.log (newValue,oldValue) this.friends.friend_1=' Wang Wu'}, immediate:true},}

It is executed once when the page loads, so the old data is undefined

Watch snooping properties can usually be used to persist data, dispatch events and execute synchronously / asynchronously, validating formats.

This is the answer to the question on how to understand the monitoring properties of Vue. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.