vue2.0 watch 详解
2024-10-19 14:53:51
vue官网解释: 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
也就是说watch可以监听对象的变化,规则是键值对方式。
export default {
props: {
fatherAjaxData: {
type: Object
}
},
data() {
return {
a: 1,
b: 2,
c: 3
}
},
watch: {
// 父级异步加载的数据 props 方式给到 当前子级
fatherAjaxData: function (val, oldVal) {
this.$nextTick(() => {
console.log('监听到已异步加载的fatherAjaxData数据 已有值');
});
},
a: function (val, oldVal) {
console.log(`watch a val change --- new val: ${val}, old val: ${oldVal}`);
},
// watch_b_val_change 方法名
b: 'watch_b_val_change',
c: {
handler: function (val, oldVal) {
console.log(`watch c val change --- new val: ${val}, old val: ${oldVal}`);
},
deep: true // 为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
}
},
mounted() { // vue 生命周期方法 vue页面全部加载完毕(不包括异步数据)
this.$nextTick(() => {
console.log('vue页面加载完毕!');
});
},
methods: {
watch_b_val_change(val, oldVal) {
console.log(`watch b val change --- new val: ${val}, old val: ${oldVal}`);
}
}
};
this.$nextTick :vue生命周期方法 当数据发生变化 dom变化后 执行$nextTick的callback方法
deep: 为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
.
最新文章
- VC++ 实现简单的桌面截图
- HBase的Write Ahead Log (WAL) —— 整体架构、线程模型
- 存储过程procedure
- [Android Pro] Android下toolbox简介
- Java基础知识强化之IO流笔记40：字符流缓冲流之特殊功能 [ newLine() / readLine() ]
- cheerio返回数据格式
- hdoj 1061 Rightmost Digit【快速幂求模】
- UML建模工具-火龙果软件
- 管理Activity，随时随地控制Activity的销毁工作
- JAVA编程心得-JAVA实现CRC-CCITT(XMODEM)算法
- C/C++ - <string> 与<string.h>、<cstring>的区别
- Ubuntu 开机启动是出现 grub rescue 解决办法
- peoplesoft function PSTREENODE 通过 deptid 获得部门树 一级部门 code
- 视觉SLAM中相机详解
- HDU [P1533]
- pyinstaller，scrapy和apscheduler
- 【题解】 bzoj3693: 圆桌会议 （线段树+霍尔定理）
- PAT 1019 数字黑洞
- 洛谷 P2420 让我们异或吧 解题报告
- [转]MS SQL Server 数据库连接字符串详解