vue2和vue3的数据响应式原理总结

最新推荐文章于 2024-08-11 22:05:36 发布

维多利亚少年-

最新推荐文章于 2024-08-11 22:05:36 发布

阅读量566

点赞数 3

分类专栏： vue2 vue3 文章标签：前端 vue.js 数据响应式

本文链接：https://blog.csdn.net/weixin_45532305/article/details/109561570

版权

vue2 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

vue2官方的介绍

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
`
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

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

自己写个简单vue2的数据响应式

<body>
    <h3 id="app">hello</h3>

    <script>
    	// 没有处理arr数组
        let data = {
            message: '123',
            count: 20
        }
        // vue的实例
        let vm = {}
        // 遍历data对象
        Object.keys(data).forEach(key => {
        	// Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
            // data中的键值对 绑定get/set
            Object.defineProperty(vm, key, {
                // 可枚举
                enumerable: true,
                // 可配置，delete删除、defineProperty重新定义
                configurable: true,
                // vm.count时会触发该函数
                get () {
                    console.log('get', data[key]);
                    return data[key]
                },
                // vm.count = 50时会触发该函数
                set (newVal) {
                    if (newVal === data[key]) {
                        return
                    }
                    data[key] = newVal
                    console.log('set', newVal);
                    document.querySelector('#app').textContent = newVal
                }
            })
        })

        vm.count = 30
        console.log(vm);
    </script>
</body>

vue3数据响应式的原理

vue3的数据响应式，是使用了ES6新增的Proxy代理对象

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

自己手写一个

<body>
    <h3 id="app">hello</h3>

    <script>
        // 模拟vm中的数据
        let data = {
            mes: 'agg',
            count: 0
        }
        // 模拟vue的实例
        let vm = new Proxy(data, {
            // 访问vm.msg时触发
            // target是代理的目标对象 就是data
            // key就是具体的属性
            get (target, key) {
                console.log('get', target[key]);
                if (target.hasOwnProperty(key)) return target[key]
                return {}
            },
            // 设置vm.msg时触发
            // set函数的入参前两个和get函数一样，newVal就是设置后的新值
            set (target, key, newVal) {
                if (target[key] === newVal) {
                    return
                }
                target[key] = newVal
                document.querySelector('#app').textContent = newVal
            }
        })

        vm.count = 30
        console.log(vm);
    </script>
</body>