Vue 3.x响应式原理

最新推荐文章于 2024-07-02 10:39:52 发布

@皮皮榴

最新推荐文章于 2024-07-02 10:39:52 发布

阅读量261

点赞数 1

分类专栏： Vue 笔记文章标签： vue proxy js

本文链接：https://blog.csdn.net/qq_39357822/article/details/119426969

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Vue

34 篇文章 0 订阅

订阅专栏

Vue 3.x中响应式原理

与Vue2.x响应式原理比较

使用ES6中新增的Proxy代理对象实现
直接监听对象，而非属性（不需要循环，性能提升）
ES6中新增，IE不支持，性能由浏览器优化

实现原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defineProperty</title>
</head>

<body>
    <div id="app">
        hello
    </div>
    <script>
        // 模拟 Vue 中的 data 选项
        let data = {
            msg: 'hello',
            count: 10
        }
        // 模拟 Vue的实例 -- 创建一个代理对象 访问data中属性时，通过代理对象访问，比如：data.msg 通过代理对象访问 -> vm.msg
        let vm = new Proxy(data, {
            // 执行代理行为的函数
            // 当访问 vm 的成员会执行
            get(target, key) {
                console.log('get, key', key, target[key]);
                return target[key];
            },
            // 当设置 vm 的成员会执行
            set(target, key, newValue) {
                console.log('set, key: ', key, newValue);
                if (target[key] === newValue) {
                    return;
                }
                target[key] = newValue;
                document.querySelector('#app').textContent = target[key];
            }
        })

        // 测试
        vm.msg = 'Hello World';
        console.log(vm.msg);
    </script>

</body>

</html>

在这里插入图片描述

ES6对象设置访问代理器–Proxy

Vue中的数据驱动、数据响应式核心原理、Vue 2.x中响应式原理

@皮皮榴

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 3.x响应式原理

Vue 3.x中响应式原理与Vue2.x响应式原理比较使用ES6中新增的Proxy代理对象实现直接监听对象，而非属性（不需要循环，性能提升）ES6中新增，IE不支持，性能由浏览器优化实现原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫

专栏目录