vue响应式原理之reactive与shallowReactive

youhebuke225

已于 2022-08-11 10:52:59 修改

阅读量187

点赞数

分类专栏： Vue基础知识文章标签： vue.js javascript 前端

于 2022-08-11 10:51:14 首次发布

本文链接：https://blog.csdn.net/youhebuke225/article/details/126259945

版权

Vue基础知识专栏收录该内容

59 篇文章 1 订阅

订阅专栏

文章目录

代码
对于代码的解释

专栏目录请点击

代码

我们先写一段代码，然后对于这个代码进行解释

<!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>Document</title>
</head>

<body>
    <script>
        // 定义拦截操作，一般我们拦截操作后进行界面的更新
        const reactiveHandler = {
            get(target, key) {
                if (key === '_is_reactive') return true
                return Reflect.get(target, key)
            },

            set(target, key, value) {
                const result = Reflect.set(target, key, value)
                console.log('数据已更新, 去更新界面')
                return result
            },

            deleteProperty(target, key) {
                const result = Reflect.deleteProperty(target, key)
                console.log('数据已删除, 去更新界面')
                return result
            },
        }

        // 定义shallowReactive函数
        function shallowReactive(obj) {
            return new Proxy(obj, reactiveHandler)
        }

        // 定义reactive函数，通过递归实现全部的响应式(对于每一个对象进行代理)
        function reactive(target) {
            if (target && typeof target === 'object') {
                if (target instanceof Array) { // 数组
                    target.forEach((item, index) => {
                        target[index] = reactive(item)
                    })
                } else { // 对象
                    Object.keys(target).forEach(key => {
                        target[key] = reactive(target[key])
                    })
                }

                const proxy = new Proxy(target, reactiveHandler)
                return proxy
            }

            return target
        }


        // 测试自定义shallowReactive 
        const proxy = shallowReactive({
            a: {
                b: 3
            }
        })

        proxy.a = { b: 4 } // 劫持到了
        proxy.a.b = 5 // 没有劫持到


        // 测试自定义reactive
        const obj = {
            a: 'abc',
            b: [{ x: 1 }],
            c: { x: [11] },
        }

        const proxy = reactive(obj)
        console.log(proxy)
        proxy.b[0].x += 1
        proxy.c.x[0] += 1
    </script>
</body>

</html>