Vue响应式源码解析-CFANZ编程社区

Vue响应式源码解析

1、为什么要学习Vue响应式源码

更好理解Vue框架的实现原理
理解Vue数据绑定原理，解决数据绑定中出现的问题
提升编码能力和架构设计水平
面试必问！面试必问！面试必问！

2、前置知识准备

理解MVVM架构模型（Vue的设计受到了MVVM模型的启发）
掌握ES6的语法及API（Proxy、Reflect）
掌握Vue2和Vue3的使用
了解响应式的概念

3、Vue双向数据绑定原理解析

3.1、Vue2 中双向绑定的实现

Object.defineProperty（）方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <script>
        let number = 18
        
        let person = {
            name: '张三',
            sex: '男'
        }

        Object.defineProperty(person, 'age', {
            // 当调用了person的age属性是，会执行get函数，返回age的值
            get() {
                console.log('get方法执行');
                return number
            },
            // 当设置person的age属性值时，会执行set函数，参数是要修改的值
            set(val) {
                console.log('set方法执行', val);
                number = val
            }
        })
    </script>
</body>
</html>

理解数据代理

概念：通过一个对象代理对另一个对象中属性的操作（读/写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <script>
        let obj1 = { x:1 }
        let obj2 = { y:2 }

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x
            },
            set(val) {
                obj1.x = val
            }
        })
    </script>
</body>
</html>

Vue2中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）
vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
- 通过Object.defineProperty()把data对象中所有属性添加到vm上
- 为每一个添加到vm上的属性，都指定一个getter/setter
- 在getter/setter内部去操作（读/写）data中对应的属性

Vue2响应式存在的问题

新增、删除属性，界面不会更新
直接通过下标修改数组，界面不会自动更新

3.2、Vue3中双向数据绑定的实现

实现原理：

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、添加、删除等；

		const person = {
            name: '张三',
            age: 18
        }

        /* const p = {}
        // Vue2的响应式
        Object.defineProperty(p, 'name', {
            configurable: true,
            get() {
                console.log('获取name属性值');
                return person.name
            },
            set(val) {
                console.log('设置name属性值');
                person.name = val
            }
        })
        Object.defineProperty(p, 'age', {
            get() {
                console.log('获取age属性值');
                return person.age
            },
            set(val) {
                console.log('设置age属性值');
                person.age = val
            }
        }) */


        // Vue3的响应式
        const p = new Proxy(person, {
            // 获取p的某个属性时调用
            get(target,propName) {
                console.log(`获取p代理对象的${propName}属性`);
                return target[propName]
            },
            // 设置或新增p的某个属性时调用
            set(target, propName, value) {
                console.log(`设置p代理对象的${propName}属性`);
                target[propName] = value
            },
            // 删除p的某个属性时调用
            deleteProperty(target, propName) {
                console.log(`删除p代理对象的${propName}属性`);
                return delete target[propName]
            }
        })

通过Reflect（反射）：对源对象的属性进行操作；

		// 使用Reflect反射
        const p = new Proxy(person, {
            // 获取p的某个属性时调用
            get(target,propName) {
                return Reflect.get(target, propName)
            },
            // 设置或新增p的某个属性时调用
            set(target, propName, value) {
                Reflect.set(target, propName, value)
            },
            // 删除p的某个属性时调用
            deleteProperty(target, propName) {
                return Reflect.deleteProperty(target, propName)
            }
        })