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

Editor to share with you how to use the watch listener in VUE, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Listeners are generally used to listen for changes in data, and the default is to execute when the data changes.

The listening data name is put here as the function name, and there are two parameters in this function, one is the new value and the other is the old value.

In vue, you use watch to respond to changes in data, and there are roughly three ways to use watch.

1. The following code is a simple use of watch: var vm=new Vue ({el: "# app", data: {firstName: "Zhang"}, watch: {firstName: (newVal,oldVal) {/ / firstName is the name of the data you want to listen to. Use the name of the function you want to listen to, such as firstName / / newVal: of v-model, to indicate the changed value. That is, the first parameter, do not change the position / / oldVal: indicates the value before the change, console.log ({newVal,oldVal}) / / {newVal: "Chen", oldVal: "Zhang"} / / write a listening handler function directly, and execute the function each time the cityname value changes. / / you can also directly add the method name in string form after the listening data: firstName: 'nameChange'}, methods: {nameChange () {}) vm.firstName = "Chen"; / / change the listening value 2. Immediate will listen immediately.

A feature of using watch basic usage is that when the value is bound for the first time, the listening function is not executed, only if the value changes. If we need to execute the function as well when we initially bind the value, we need to use the immediate attribute.

Watch: {firstName: {handler (newName, oldName) {this.fullName = newName +'+ this.lastName;}, {immediate: true}

The listening data is written in the form of an object, including the handler method and immediate. The function we write is actually writing the handler method, omitted by default.

3. Handler method

Number: {{myNumber}}

Number:

New Vue ({el:'# app', data: {myNumber: 'Dawei'}, watch: {myNumber: {handler (newVal, oldVal) {console.log (' newVal', newVal); console.log ('oldVal', oldVal);}, / / callback function is triggered immediately when it is true If false, the callback will not be executed immediately, as in the above example. Immediate: true}) / / handler method is the method that needs to be executed in your watch. 4. Deep attribute

How do we listen to objects or properties in objects? Then introduce the deep attribute. Its function is the key to solve this problem.

Obj.a: {{obj.a}}

Obj.a:

New Vue ({el:'# root', data: {obj: {a: 123}}, watch: {obj: {handler (newName, oldName) {console.log (newName, oldName) }, immediate: true, deep:true})

If the above code is not added with deep:true, then it will not be executed in console, only for the first time, and the output will be undefined.

By default, handler only listens for changes in its reference to the property obj, which it listens to only when we assign a value to obj.

At this point, you can use deep to drill down, and the listener will traverse layer by layer, adding this listener to all the properties of the object, but this is too expensive.

The above is all the contents of the article "how to use watch listeners in VUE". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.