vue watch监听对象及对应值的变化详解
更新时间：2018年02月24日 15:11:05 作者：金大光
下面小编就为大家分享一篇vue watch监听对象及对应值的变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
var vm=new Vue({
data:{
a:1,
b:{
c:1
}
},
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
b:{//深度监听，可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
},
deep:true
}
}
})
vm.a=2
vm.b.c=2
a是一个普通的值，当a的值变化时会被监听到，b是一个对象，不能直接像a那么写，需要深度监听才能捕捉到，但是当我想去捕捉b对象中某一个值的变化时却发现，打印出来的两个值是不一样的，如图：
这样就只能知道对象发生变化却不知道具体哪个值发生了变化，如果想监听对象某一个值得变化可以利用计算属性computed
var vm=new Vue({
data:{
b:{
c:1
}
},
watch:{
newValue(val, oldVal){
console.log("b.c: "+val, oldVal);
}
},
computed: {
newValue() {
return this.b.c
}
}
})
vm.b.c=2
用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化，结果如图：
以上这篇vue watch监听对象及对应值的变化详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
使用iView Upload 组件实现手动上传图片的示例代码
这篇文章主要介绍了使用iView Upload 组件实现手动上传图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
脚手架是一种用于快速开发Vue项目的系统架构，这篇文章主要介绍了Vue脚手架实现试卷页面功能，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
本篇文章主要介绍了vue mint-ui学习笔记之picker的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Axios的基本使用,包括异步编程的基础知识,如Promise的介绍、特点和基本用法,以及如何使用then、catch和async/await来处理异步操作,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-02-02
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
这篇文章主要介绍了Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面),本文通过实例代码文字说明给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要介绍了vue工程如何为组件自动注入全局样式文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue-element-admin 登陆及目录权限控制的实现
本文主要介绍了vue-element-admin 登陆及目录权限控制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)
v-bind是Vue.js中的一个核心指令,用于在Vue组件或DOM元素上绑定数据属性,下面这篇文章主要给大家介绍了关于Vue3在css中使用v-bind绑定js/ts变量的相关资料,也可以在scss和less中使用方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue-datepicker的使用，本文通过实例代码大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论