vue watch All In One
2024-10-12 17:42:14
vue watch All In One
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// string method name
b: 'someMethod',
// the callback will be called whenever any of the watched object properties change regardless of their nested depth
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// the callback will be called immediately after the start of the observation
d: {
handler: 'someMethod',
immediate: true
},
// you can pass array of callbacks, they will be called one-by-one
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
immediate: true & deep: true,
深度监听，可监听到对象、数组的变化
watch: {
propsWatched: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
customItemType: {
handler (val, oldVal) {
const newCustomItemType = {
region: {
isMultiple: true,
canDelete: true,
},
package: {
isMultiple: true,
canDelete: true,
},
...val,
};
console.log('newCustomItemType =', newCustomItemType);
return newCustomItemType;
},
immediate: true,
deep: true,
},
}
refs
https://vuejs.org/v2/api/#watch
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- C语言基础(7)-float,double,long double类型
- chrome升级后LODOP打印插件无法使用
- EL表达式的操作符
- c基础补充
- [未完成]关于Eclipse4RCP书中内容总结
- c# List Sort排序
- Smallest Difference（POJ 2718）
- Js把URL中的参数解析为一个对象
- POJ 1258-Agri-Net (Kruskal)
- 推荐一套.NET文档处理组件Spire.Office
- 996.icu，不加班的程序员有前途吗？
- Java学习笔记41（Properties类）
- JavaScript学习 - 基础(一)
- Springboot集成Common模块中的的全局异常处理遇见的问题
- Java中的时间日期处理
- UEditor自定义toolbar工具条
- JS求一个数组元素的最小公倍数
- (14) go 结构体
- 洛谷P3292 [SCOI2016] 幸运数字 [线性基，倍增]
- UVA-1619 Feel Good （单调队列）