## 在真实的项目中，最好用Watch来监听data中的某个属性，其实在methods中也可以控制data中的某个属性， 但是在内存开销比较大的时候 或者是异步调用比较多的时候，watch的好处就体现出来了，话不多说 上代码 好吧

基本语法：

<input v-model="active"/> <script> export default { data() { return{ active: 0 } }, watch: { active(newval,oldval){ //里边有两个参数 newval代表改变之前的值 oldval代表改变之后的值 console.log(newval,oldval) } } }; </script>

看控制台：

**

标准语法

上边的语法是简写的语法 但是你有没有想过假如监听属性监听的是一个对象或者数组 而且层级比较深的话是否可以监听的到呢 当然是监听不到 我们来看Vue的标准语法 **

data() { return{ active: 0, obj:{ message:0 } } }, watch: { active(newval,oldval){ // console.log(newval,oldval) }, obj:{ //监听input的obj handler(newval,oldval){ console.log(newval.message, oldval) }, deep:true, //开启深度监听 } }

看浏览器：

你以为Vue就这点本事 ？ 不不不 别小瞧了Vue 他还可以监听路由的变化！！

直接上代码：

data() { return {}; }, watch: { '$route': { handler: function(val, oldVal) { console.log(val); }, deep: true, // 开启深度监听 immediate:true //开启实时监听 } }

控制台：