vue watch普通监听和深度监听实例详解(数组和对象)

下面通过一段代码给大家介绍vue watch的普通监听和深度监听，具体代码如下所示：

var vm=new Vue({

data:{

num:1,

obj:{

name:'三儿',

age:'21',

sex:'女'

}

},

watch:{

num(val, oldVal){

//普通的watch监听

console.log(“num: “+val, oldVal);

},

obj:{

//深度监听，可监听到对象、数组的变化

handler(val, oldVal){

console.log(“obj.name: “+val.name, oldVal.name);

},

deep:true

}

}

})

vm.num=2

vm.obj.name='二儿'

下面单独给大家介绍下vue-watch 深度监听

watch:{} 对象，可监听数据，数据发生变化， 处理函数

目的： watch虽可监听，但只是浅监听，只监听数据第一层或者第二层，

何为第二层？

let obj = {name: 'xx', child: {age: 11}};

child之后的值就为第二层或者深层

实现目标: 如果 要监听一个对象中的属性，属性最高也是第二层了，watch可能监听不到，

所有要使用深度监听：

实现代码:

watch: {

' user.phone ' : {

handel:function() { //特别注意，不能用箭头函数，箭头函数，this指向全局

处理函数

},

deep: true //深度监听

}

}

总结

以上所述是小编给大家介绍的vue watch普通监听和深度监听实例详解(数组和对象)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

时间： 2018-08-15

1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu": this.$router.push({ name: "AppAccountInfo", }); break; //在菜单路由上存储各种需要信息 case "publicDocInfoMenu": //菜单code: publicDocInfoMenu data.i

前言 创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:

一.watch监听路由变化 解决办法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二.watch监听对象 例子:

watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe

watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行

监听方法watch的使用

在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param  obj  要配置属性的某个对象 @param propname

现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: