VueJs探索之watch用法详解

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。

<div id="app">
    <input type="text" v-model:value="childrens.name" />
    <input type="text" v-model:value="lastName" />
</div>

<script type="text/javascript">	
    var vm = new Vue( {
        el: '#app',
        data: {
            childrens: {
                name: '小强',
                age: 20,
                sex: '男'
            },
            tdArray:["1","2"],
            lastName:"张三"
        },
        watch:{
            childrens:{
                handler:function(val,oldval){
                    console.log(val.name)
                },
                deep:true//对象内部的属性监听，也叫深度监听
            },
            'childrens.name':function(val,oldval){
                console.log(val+"aaa")
            },//键路径必须加上引号
            lastName:function(val,oldval){
                console.log(this.lastName)
            }
        },//以V-model绑定数据时使用的数据变化监测
    } );
    vm.$watch("lastName",function(val,oldval){
        console.log(val)
    })//主动调用$watch方法来进行数据监测
</script>
</body>

注意：数组的改变不需要使用深度watch。