Vue 拦截监听原理

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 拦截监听原理

目录

拦截监听原理

如何跟踪变化

拦截监听示例

观察者

注意:vue3的变化

总结

拦截监听原理

如何跟踪变化

当你把一个普通的Javascript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的property，并使用 0bject.defineProperty 把这些 property 全部转为 getter/setter。0bject.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter对用户来说是不可见的，但是在内部它们让 vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

拦截监听示例

Vue对变量（状态）改变拦截监听的原理是利用Es5中一个方法。

示例如下：

<script>
    var obj = {};
    Object.defineProperty(obj, 'myname',{
        get() {
            console.log('访问了');
        },
        set() {
            console.log('修改了')
        }
    })
</script>

通过控制台访问和修改属性

Get set拦截，只要有人访问、有人修改就会被触发

帮你进行拦截值的改变，帮你调用dom修改对象值。

观察者

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

注意:vue3的变化

Object.defineProperty有以下缺点。

1、无法监听es6的Set、Map 变化;

2、无法监听Class类型的数据;

3、属性的新加或者删除也无法监听,

4、数组元素的增加和删除也无法监听。

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下(没错，IE11都不支持Proxy)，会自动降级为Obiect.defineProperty的数据监听系统。

总结

Vue 渐进式JavaScript 框架 学习笔记 - Vue 拦截监听原理