Vue3.0响应式原理

最新推荐文章于 2022-10-28 01:29:59 发布

敲出真谛

最新推荐文章于 2022-10-28 01:29:59 发布

阅读量263

点赞数 1

分类专栏： Vue Vue3.0 响应式原理

本文链接：https://blog.csdn.net/qq_36818627/article/details/107324511

版权

Vue 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

响应式原理

2 篇文章 0 订阅

订阅专栏

周日（2020-07-12）下了一天雨，闲来无事，就把vue的响应式原理从2.0-3.0手敲了一遍，最后实现了一个mini版的vue,有时间和大家慢慢分享。从上篇博客中我们知道vue3.0在数据的响应式上无疑做了很大的优化，性能得到大大提升。虽然vue3.0还没有正式发布，但是各大公众号已经闹得不亦说乎。

我们都知道vue2的响应式原理的实现依赖的是Object.defineProperty这个API,用它来为要实现响应式的数据设置getter和setter方法。如果数据多时就要循环遍历。循环遍历就会降低性能，所以vue3.0就摒弃了这个方法，改为使用ES6中的proxy来实现。而这个方法没有shim,不兼容低版本浏览器。所以vue3.0彻底摒弃了它们。

1.核心代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue3.0响应式原理</title>
</head>

<body>
    <div id="app">hello</div>
    <script>
        const data = {
            msg: 'hello',
            count: 0
        }
        // 设置代理
        let vm = new Proxy(data, {
            get(target, key) {
                console.log('get,key:', key, target[key])
                return target[key]
            },
            set(target, key, newValue) {
                console.log("set,key:", key, newValue)
                if (target[key] === newValue) {
                    return
                }
                target[key] = newValue
                document.getElementById('app').textContent = target[key]
            }
        })
        // 测试用例
        vm.msg = "Hello World"
    </script>
</body>

</html>

2.使用Proxy也是data中的数据设置getter和setter方法，而此时的getter方法是带有参数的，第一个参数是data对象，第二个参数是data中的key。此时的setter方法有三个参数第一个是 data对象，第二个是data中的key,第三个是要设置的值。

3.使用代理模式时我们可以看到在setter方法中即使 target[key] = newValue 也不会造成内存泄漏。

敲出真谛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue3.0响应式原理

周日（2020-07-12）下了一天雨，闲来无事，就把vue的响应式原理从2.0-3.0手敲了一遍。从上篇博客中我们知道vue3.0在数据的响应式上无疑做了很大的优化，性能得到大大提升。虽然vue3.0还没有正式发布，但是各大公众号已经闹得不亦说乎。我们都知道vue2的响应式原理的实现依赖的是Object.defineProperty这个API,用它来为要实现响应式的数据设置getter和setter方法。如果数据多时就要循环遍历。循环遍历就会降低性能，所以vue3.0就摒弃了这个方法，改为使用ES6中
复制链接

扫一扫