vue2.0+watch()
来源:互联网 发布:叮叮聊天软件 编辑:程序博客网 时间:2024/06/02 01:33
类型:string | Function | Object
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
阅读全文
0 0
- vue2.0+watch()
- vue2.0学习笔记 ——watch
- vue1.0和vue2.0的watch监听事件写法
- Vue2 监听属性改变watch
- vue2 中 computed 和 watch 的异同?
- vue2.0
- vue2.0
- vue2.0
- vue2.0Demo
- Vue2.0环境搭建
- vue2.0生命周期
- Vue2.0 引用插件
- Vue2.0 配置文件解析
- vue2.0变化
- Vue2.0配置文件解析
- Vue2.0简易案例
- vue2.0 过滤器用法
- vue2.0 自定义指令
- 如何不输入项目名端口号直接访问java web项目
- 菜鸟编程 关于一维数组与二维数组
- jjdxm-ijkPlayer开源视频框架简单的日常使用
- 单例模式
- Find More Coins (30)
- vue2.0+watch()
- 代码插入功能使用
- Java第十八天~第十九天/11.25~11.26
- linux 系统性能 检测 命令 atop
- MIT18.06线性代数课程笔记15:子空间投影矩阵
- DevExpress中lookUpEdit使用
- Hadoop
- iTunes 如何查看歌词
- RSA指数模数加密