vue响应式
vue程序中,当值发生改变,它会做三件事:
-
更新网页上的值
price
-
计算新的表达式,更新页面
price*code
-
再次调用功能并更新页面
totalPriWithTax
通过声明一个class完成以上需求简易的实现,这个class需要有几个功能,一个功能是记录需要更新的表达式,另一个功能是运行所记录的表达式(更新数据)。
1.通过声明Dep class以完成类似操作:
Dep class 用于收集依赖函数(Dependency)
- depend:用于存储需要运行的target
- notify:重新执行所有存储的target function
class Dep {
constructor () {
this.subscribers = []
}
depend() {
if (target && !this.subscribers.includes(target)) {
// Only if there is a target & it's not already subscribed
this.subscribers.push(target)
}
}
notify() {
this.subscribers.forEach(sub =>