Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how vue uses watch snooping properties, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use watch snooping attributes in vue. Let's take a look.

Basic usage

The most important usage scenario for Vue watch is to execute some business logic based on the change of an attribute:

Export default {name: "Counter", data: function () {return {counter: 0,};}, watch: {counter: function (newV, oldV) {console.log ('counter change to% d from% dudes, newV, oldV);},}}

The basic use of watch is simple: define a function with the same name for the property you need to listen to. The first parameter of the function is the changed value, and the second parameter is the pre-changed value.

Monitor object

First, let's review a concept in JavaScript: complex data variables. The reason for "complexity" is that the variable is just a reference, similar to a pointer in C++, which holds not the real data, but the address of the data.

For example, for an object variable, adding attributes, deleting attributes, and changing the value of attributes will not change the address, which can also be said that the object variable has not changed.

Regardless of the framework used, the basic theorem must be valid, so listening to object in Vue is also a problem, especially for nested data.

The change here refers to the change of the address, and the easiest way to trigger the change is to reassign the value.

Up trigger {{counter.up}} times Trigger Up

Down trigger {{counter.down}} times Trigger down export default {name: "Counter", data: function () {return {counter: {up: 0, down: 0,},};}, methods: {onTrigger: function (type) {this.counter [type] + = 1 }, watch: {counter: function (newV, oldV) {/ / console.log ('counter change to% o from% oasis, newV, oldV) will not be triggered;},}}

Snooping against counter will not be triggered because this.counter [type] + = 1; does not change the this.counter (the address remains the same). So what should I do if I want to monitor this change? Generally speaking, there are two ways:

Use the deep parameter watch: {counter: {handler: function (newV, oldV) {console.log ('counter change to% o from% oasis, newV, oldV);}, deep: true,}}

To use deep, you need to use the full form of watch: handler is a listening callback function. Deep: true specifies to listen not only for changes in counter, but also for changes in its internal attributes, so you can start handler callback only when counter.up or counter.down changes.

Reassign methods: {onTrigger: function (type) {/ / re-assign trigger change this.counter = {... this.counter, [type]: this.counter [type] + 1,};}, watch: {counter: function (newV, oldV) {/ / console.log ('counter change to% o from% oasis, newV, oldV) will not be triggered;},}

What are the advantages and disadvantages of those two ways? Using the deep parameter adds listening to each layer of the data, which consumes performance when the level is deep, and Vue cannot listen for the addition or deletion of attributes.

So generally speaking, it is better to use re-assignment, but if you just want to monitor the inline

If you nest the data, the reassignment is heavy, so Vue also provides a way to directly listen for changes in nested properties:

Listen for internal data watch via path: {'counter.up': function (newV, oldV) {console.log (' counter.up change to% d from% dwells, newV, oldV);}, 'counter.down': function (newV, oldV) {console.log (' counter.down change to% d from% dudes, newV, oldV);},}

In this way, the performance consumption caused by using deep can be avoided, which is more appropriate in a scenario that only responds to internal attribute changes, but we should still pay attention to the scenario when the monitored path data is still complex data.

Initialization variable triggers listening callback

When listening for changes using watch, giving the initial value of the variable will not trigger the listening function. If you want to change this default setting, you can use the immediate parameter, which is similar to deep:

Watch: {counter: {handler: function (newV, oldV) {console.log ('counter change to% o from% oasis, newV, oldV);}, immediate: true,}}

This triggers the listener function when the initial value is assigned, where the first parameter is the initial value and the second parameter is undefined.

This is the end of the article on "how vue uses watch snooping properties". Thank you for reading! I believe you all have a certain understanding of "how vue uses watch snooping properties". If you want to learn more, 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.