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

What is the listener in the foundation of Vue? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

What is a listener in vue

In the development, we define the data in the object returned by data, which can be bound to templat by interpolation syntax and so on.

When the data changes, the data bound in template is automatically updated to display the latest data. But this change is carried out by automatically listening for the value of data in template.

In some cases, when we want to listen for changes in some data in the code logic, we need to use the listener watch

Official definition: Vue provides a more general way to respond to changes in data through the watch option. This is most useful when you need to perform asynchronous or expensive operations when the data changes.

An object, the key is the responsive property-- to listen for contains data or computed property, and the value is the corresponding callback function. The value can also be the name of the method, or an object that contains additional options. The component instance will call $watch () when instantiated, see $watch for more information about the deep, immediate, and flush options

The use of listeners

Option: watch

Type: {[key: string]: string | Function | Object | Array}

Configuration options for listener watch:

By default, watch only listens for changes in references to data and does not respond to changes in the internal properties of the data:

At this time, we can use one option, deep, for deeper listening; another property, which we hope will be executed immediately at the beginning: this time we use the immediate option; at this time, regardless of whether the data changes later, the listening function will be executed only once.

The content of data:

Data () {return {info: {name: 'cgj'}} watch: {info: {handler (newValue, oldValue) {console.log (newValue, oldValue)} deep: true, immediate: true,}}

The other is not mentioned in the Vue3 document, but what is mentioned in the Vue2 document is the properties of the listening object:

'info.name': function (newValue, oldValue) {console.log (newValue, oldValue)}

Another way is to use the API of $watch:

For a specific $watch, you can check the official API (in a few ways): instance method | Vue.js

Const app = createApp ({data () {return {a: 1, b: 2, c: {d: 4}, e: 5, f: 6}}, watch: {/ / listening on top-level property a (val, oldVal) {console.log (`new: ${val}, old: ${oldVal} `)} / / string method name b: 'someMethod', / / this callback will be called when the property of any listening object changes No matter how deep it is nested c: {handler (val, oldVal) {console.log ('c changed')}, deep: true}, / / listen on a single nested property 'c.dink: function (val, oldVal) {/ / do something}, / / the callback will be called e: {handler (val) immediately after the listening starts. OldVal) {console.log ('e changed')}, immediate: true}, / / you can pass in the callback array They will be called one by one f: ['handle1', function handle2 (val, oldVal) {console.log (' handle2 triggered')}, {handler: function handle3 (val, oldVal) {console.log ('handle3 triggered')} / *. * /}]} Methods: {someMethod () {console.log ('b changed')}, handle1 () {console.log ('handle1 triggered')}}) const vm = app.mount (' # app') vm.a = 3 / / = > new: 3, old: 1vue listener-watch

Goal: can listen for data/computed attribute value changes

Syntax:

Watch: {"property name being listened on" (newVal, oldVal) {}}

Example code:

Export default {data () {return {name: ""}}, / / Target: hear a change in the name value / * Syntax: watch: {variable name (newVal) OldVal) {/ / variable name corresponding value change is automatically triggered here} * / watch: {/ / newVal: current latest value / / oldVal: last value name (newVal, oldVal) {console.log (newVal, oldVal) }}}

Summary: to listen for a property change, use the listening property watch

Vue listener-Deep listening and immediate execution

Goal: can listen for data/computed attribute value changes

Syntax:

Watch: {"property name being listened on" (newVal, oldVal) {}}

Example code:

Export default {data () {return {user: {name: ", age: 0}, / / Target: listening object / * Syntax: watch: {variable name (newVal, oldVal) {/ / variable name corresponding to value change automatically triggered}, variable name: {handler (newVal) OldVal) {}, deep: true, / / Deep listening (the value of the inner layer of the object changes) immediate: true / / listen immediately (open the handler for execution)} * / watch: {user: {handler (newVal, oldVal) {/ / object console.log in user (newVal, oldVal) }, deep: true, immediate: true}

Summary: immediate listen immediately, deep depth listen, handler fixed method trigger

After reading the above, have you mastered the methods of listeners in the foundation of Vue? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.