vue2.0中监听watch的三种写法

vue2.0中监听watch的三种写法

watch：观测Vue实例上的数据变动，对应一个对象。
键：就是需要监测的那个东西，
值：

1.可以是当键变化时执行的函数，有两个参数，第一个是变化后的值，第二个是变化前的值。
2.可以是函数名，得用单引号包裹。
3.可以是一个对象，这个对象有三个选项：

（1）handler ：一个回调函数，监听到变化时应该执行的函数。
（2）deep ：boolean值，是否深度监听。（一般监听时是不能监听到对象属性值的变化的，数组的变化可以听到）
（3）immediate ：boolean值，是否立即执行handler函数。

watch的三种情况：

1、普通的watch：

el:'#app',data:{meter:1000,kilameter:1},watch:{meter:function(val){this.kilameter = val * 0.1;},kilameter:function(val){this.meter = val *1000;}}
})

2、数组的watch：

el:'#app',data:{arr:[1,2,3]},watch:{arr:function(newV,oldV){console.log(newV); console.log(oldV);    }}
})

3、对象的watch：

写法一：

el:'#app',data:{obj : {a:111,b:222}  },watch:{obj:{handler:function(newV,oldV){console.log(oldV);},deep:true}}
)

写法二

显示价格：{{$store.state.editTask.rowData.price}}

store定义数据

src/store/modules/editTask.js

const state = {rowData:{},//当前行数据
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！