Vue.js 监听数据对象变化源码分析
在 Vue.js 中,我们可以使用 $watch
或者 watch
来监听数据对象的变化。下面我们来深入探讨一下 Vue.js 是如何实现这个功能的。
原理分析
在 Vue.js 中,当需要监听一个数据对象的变化时,Vue.js 会通过建立 Watcher
实例来实现这个目的。
首先,Vue.js 会对数据对象进行依赖收集,将当前 Watcher 实例存储到该数据对象的依赖列表中。然后,当该数据对象发生变化时,Vue.js 会遍历该数据对象的依赖列表,并触发相应的 Watcher 实例的更新函数。从而实现了数据对象变化时对其进行监听的效果。
下面是 Vue.js 中的 Watcher
类的简化代码:
----- ------- - --------------- -------- --- - ------- - --- ----------- - ------------------- ------- - --- ---------- - ----------- - ----- - ---------- - ----- ----- ----- - ------------------------- --------- ---------- - ----- ------ ------ - -------- - ----- -------- - ----------- ---------- - ----------- --------------------- ----------- ---------- - -
Watcher
类主要有三个参数:
vm
: Vue 实例对象expOrFn
: 数据对象的表达式或者函数cb
: 回调函数
在实例化 Watcher
时,会先获取当前数据对象的值,并将 Watcher 实例存储到该数据对象的依赖列表中。当数据对象发生变化时,Vue.js 会遍历该数据对象的依赖列表,并触发相应的 Watcher 实例的更新函数。
监听对象的变化
除了监听数据对象的属性变化,Vue.js 还支持监听整个对象的变化。这个功能是通过 vm.$watch
来实现的。
下面是一个示例:
----- -- - --- ----- ------ - ------ - ---- - ----- ------ ---- --- -- -- -- --- ---------------- -------- ------- -- - ---------------- -------- -- ------- -------- -- - ----- ---- ---
在这个示例中,我们监听了整个 obj
对象的变化,同时传入了一个配置项 { deep: true }
表示深度监听。当 obj
发生变化时,会输出如下结果:
--- -------- ------ -------- ---- --- ------ ------ ---- ---
总结
Vue.js 借助于 Watcher
类实现了监听数据对象的变化。当数据对象发生变化时,Vue.js 会遍历该数据对象的依赖列表,并触发相应的 Watcher 实例的更新函数。此外,Vue.js 还支持监听整个对象的变化,通过传入 { deep: true }
配置项来实现深度监听。
参考资料
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/2275