关于vue 使用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方法来进行数据监测</span>  

</script>  

</body>