watch 主要应用于某些数据变化时, 会执行某些操作, 下面我们来看看 watch 的用法
1, 普通用法
- data:{firstName:'Ye'},
- watch:{
- firstName:function(oldVal,newVal){
- console.log("lastName")
- },
- }
简单监视, 只要 firstName 有变化, 就会执行函数里面的方法
2, 用法二
- watch:{
- lastName:{
- handler:function(){
- console.log("invole lastName")
- },
- immediate:true// 第一次进来就开始监视, 而不是等到下次数据改变了才执行
- },
- }
immediate:true 表示第一次进入的时候, 就会监视 lastName 的值, 如果为 false, 第一次进入是不会监视的, 只有等到监视的数据变化了才会执行
3, 用法三, 监视对象
- watch:{
- obj:{
- handler(oldVal,newVal){
- console.log("objfixed")
- },
- immedaite:true,
- deep:true,// 对象的任何属性修改了都会监视到,
- }
- }
deep:false 监视 obj 对象, 如果只是修改了对象的某些属性, 监视不到 obj 的变化, 只有 obj 整个有变化之后,
才会执行方法.
deep:true, 只要修改 obj 里面的任意属性, 都会执行 handler 里面的方法. 这样的话, 开销就会比较大. 解决方法看用法四.
4, 用法四 监视对象的某个属性
- data:{
- obj:{
- a:'123',
- b:'456'
- }
- }
- watch:{
- 'obj.a':{
- handler(oldVal,newVal){
- console.log("objfixed a")
- },
- immedaite:true,
- }
- }
vue 会一层一层地解析这个对象的所有属性, 当检查到最后一个属性时, 他才会去监听他真正想监听的那个属性.
注意: 无论是 watch 还是 computed, 最可能的不要去修改你依赖的那个属性, 否则很容易出现一个无限循环的问题
- 'obj.a':{
- handler(oldVal,newVal){
- console.log("objfixed a")
- this.obj.a += 1;
- },
- immedaite:true,
- }
image.png
来源: http://www.jianshu.com/p/9989e07d6dbe