vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层
2024-09-19 01:24:19
有时候需要侦听某个对象具体的属性，可以按下面案例进行：
<template>
<div>
<input type="text" v-model="obj.two">
<div>{{two}}</div>
</div>
</template> <script>
export default {
data:function(){
return {
obj: {
one: 1,
two: 2
}
}
},
computed: {
two:function(){
// 此时利用计算属性computed做中间层
return this.obj.two
}
},
watch:{
two:function(newValue, oldValue){
console.log(newValue)
}
}
}
</script>
分析：
1.data的时候，对其中的每个存在的值会进行深度遍历，创建dep
2.computed的时候会分析其中的值，然后把computed添加到了依赖值的dep通知队列里
3.这样每次this.obj.two变的时候就会通知two该执行了
最新文章
- tableview左滑按钮 tableviewcell自定义左滑按钮
- MySQL主从复制中常见的3个错误及填坑方案
- PHP用mb_string函数库处理与windows相关中文字符
- ACM/ICPC 之 最长公共子序列计数及其回溯算法(51Nod-1006(最长公共子序列))
- Boost源码剖析之：泛型指针类any
- [编解码] 关于base64编码的原理及实现
- 。。。JDBC里面的sql与hibernate里面的hql有关占位符"?"的总结。。。
- 转——Android应用开发性能优化完全分析
- HDU 4513 吉哥系列故事——完美队形II
- Linux共享内存(一)
- WebAPI初探
- The 5th Zhejiang Provincial Collegiate Programming Contest---ProblemG：Give Me the Number
- ubuntu安装软件
- android gif动画开源框架android-gif-drawable
- eplan图框制作
- Java多线程之---用 CountDownLatch 说明 AQS 的实现原理
- php生成xml数据
- STL之迭代器(iterator)
- C++ Primer 笔记——控制内存分配
- Bootstrap自动定位浮标