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

This article mainly introduces the example analysis of watch monitoring attribute knowledge points in Vue.js, which is very detailed and has certain reference value. Friends who are interested must finish it!

This property is used to monitor changes in certain data and trigger the corresponding callback function to execute

1. Basic usage

(1) add the watch attribute with a value of an object. The property name of the object is the data to be monitored, and the property value is the callback function. Whenever the corresponding value of the property name changes, it will trigger the callback function to execute

(2) the callback function has two parameters:

NewVal: the value after the data has changed

OldVal: the value before the data is changed

Var vm = new Vue ({el:'#app', data: {name: 'Guo Jing'}, watch: {name (newVal,oldVal) {console.log ('the value of name has changed') console.log (newVal,oldVal)}) vm.name = "Guo Hero" / / executes this line of code and triggers the corresponding callback function

Execution result:

The value of name has changed, Guo Hero Guo Jing.

two。 Listen for changes in the internal properties of an object

The previous example only listens to the first layer of data in data. If you want to listen for multi-level data, such as a.b.c, the attribute name needs to be enclosed in quotation marks.

{{name}}

Modify wife.name modify wife var vm = new Vue ({el:'#app', data: {name: 'Guo Jing', age: 20, wife: {name: 'Huang Rong', sex: 'female'}}, watch: {/ / listen on the name attribute 'wife.name'' in wife (newVal) OldVal) {console.log ('wife.name has changed')}, / / listen to wife' wife' (newVal,oldVal) {console.log ('wife has changed')}}, methods: {test () {this.wife.name = "'Huang Gang Master'}, test2 () {this.wife = {name:' I am not Huang Rong' Sex:'women'})

The running results show that whether the value of his parent object has changed, or its own value has changed, it will cause the callback function of this monitoring property to execute.

3. Listen for routing changes

Tip: the path information of the route is saved in $route.path

Watch: {'$route.path':function (newval) {console.log ('change')}}

4. Deep monitoring

The monitoring attribute can only listen for changes in the value of the current object, but not the changes in the attributes within the object. We have previously listened to wife and wife.name. Modifying wife.name will not trigger the callback function of listening wife.

If you want to listen for changes in property values within an object, you need to configure them accordingly.

Deep: deep snooping, default false

Handler: callback function

Immediate: whether a callback is triggered during page initialization. Default is false.

Var vm = new Vue ({el:'#app', data: {name: 'Guo Jing', age: 20, wife: {name: 'Huang Rong', sex: 'female'}}, watch: {wife: {deep:true, handler:function (newVal,oldVal) {console.log ('value is change')} Immediate:true}) vm.wife.name = 'Master Huang' / / the callback corresponding to the triggered wife attribute is all the contents of this article entitled "sample Analysis of watch Monitoring attribute knowledge points in Vue.js" Thank you for reading! Hope to share the content to help you, more related 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.