Vue.js watch monitor property

This property is used to monitor changes in certain data and triggers the corresponding callback function executes

1. Basic Usage

(1) add a watch attribute value of an object. An object property name data is to be monitored, the callback function attribute value, whenever this value corresponding to the attribute name change will trigger execution of the callback function
(2) callback function has two parameters:
the data changes: newVal value
oldVal: before the change should occur

var vm = new Vue({
    el:'#app',
    data: {
        name: '郭靖'
    },
    watch: {
        name(newVal,oldVal){
            console.log('name的值发生了变化')
            console.log(newVal,oldVal)
        }
    }
})

vm.name = "郭大侠" // 执行这行代码，会触发对应的回调函数

Results of the:

name的值发生了变化
郭大侠 郭靖

2. monitor changes inside the object attributes

The preceding examples merely monitor data in a first data layer, if the multi-level data to be monitored, e.g. ABC, the attribute names need to wrap quotes

<body>
    <div id="app">
        <p>{{name}}</p>
        <button @click="test">修改wife.name</button>
        <button @click="test2">修改wife</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
            name: '郭靖',
            age: 20,
            wife: {
                name: '黄蓉',
                sex: '女'
            }
        },
        watch: {
            //监听wife中的name属性
            'wife.name'(newVal,oldVal){
                console.log('wife.name发生了改变')
            },
            //监听wife
            'wife'(newVal,oldVal){
                console.log('wife发生了改变')
            }
        },
        methods:{
            test(){
                this.wife.name = "'黄帮主'"
            },
            test2(){
                this.wife = {name:'我不是黄蓉',sex:'women'}
            }
        }
    })
</script>

The result shows, whether it is the object of his parent's value has changed, or the value itself has changed, will cause the callback function that monitors the implementation of the property.

3. monitor routing changes

Tip: The path routing information is stored in the $ route.path

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

4. Depth monitor

Monitoring attributes can only listen to the current changes in the value of the object, and the property will not change inside the object listening to, in front of the wife and wife.name we monitor, and modify the wife.name listens wife will not trigger callback function.
We want to monitor changes in property values inside the object needs to be configured accordingly.

deep: depth monitoring, default false
handler: the callback function
immediate: whether to trigger a callback when the page is initialized, default false

var vm = new Vue({
    el:'#app',
    data: {
        name: '郭靖',
        age: 20,
        wife: {
            name: '黄蓉',
            sex: '女'
        }
    },
    watch: {
        wife:{
            deep:true,
            handler:function(newVal,oldVal){
                console.log('value is change')
            },
            immediate:true
        }
    }
})

vm.wife.name = '黄帮主' // 触发wife属性对应的回调