Vue响应式源码解析
很多同学在看到“源码解析”这个词时，会有种莫名其妙的恐惧感，觉得读源码是一件非常困难的事情。其实，分析框架的源码，并不是像同学们想象的那样困难，我们可以通过非常简单的案例，来还原框架中的源码。通过简单的框架源码雏形，快速理解框架的设计思想。
1、为什么要学习Vue响应式源码
- 更好理解Vue框架的实现原理
- 理解Vue数据绑定原理，解决数据绑定中出现的问题
- 提升编码能力和架构设计水平
- 面试必问！面试必问！面试必问！
如果我们对框架的源码有了很深层次的理解，或者是我们可以达到手写一个简单的源码Demo，这就能帮助我们更好的理解框架的实现原理。通过学习框架源码的方式，更好的理解框架作者的设计思想，提升我们的编码能力和架构设计水平，分析源码也是成为架构师的必备技能。
那么学习框架源码还有个非常重要的原因，那就是面试会问到，不是说所有的面试都会框架的源码和设计原理，但是如果你要面试的开发岗位级别比较高的话，框架的设计原理是必问题目。
所以，分析和学习框架的源码，无论是从写代码的能力上，还是从职业发展方面，都是对我们非常有帮助的。
2、前置知识准备
- 理解MVVM架构模型（Vue的设计受到了MVVM模型的启发）
- 掌握ES6的语法及API（Proxy、Reflect）
- 掌握Vue2和Vue3的使用
- 了解响应式的概念
首先，要理解MVVM架构模型的概念，因为Vue的设计是受到MVVM模型的启发的，我们也可以在Vue官网看到这句话（切官网），所有说，Vue是一个轻量的MVVM框架，所以，理解MVVM的架构模型，是学习Vue的第一步。
还有就是，我们要掌握ES6的语法，以及一些核心的API，例如Proxy代理对象，Reflect反射对象，因为在Vue3中的响应式就是基于这两个对象实现的。除此之外呢，还需要掌握Object.defineProperty()函数的使用，在Vue2中的响应式，就是基于Object.definProperty函数实现的。因为Vue3已经发布了很长时间了，官方已经对Vue2停止维护了，所以大家重点掌握Vue3的原理及使用。在本节课中，我会带着大家先从Vue2的响应式原理开始分析，逐步过渡到Vue3的响应式原理。所以，大家要提前掌握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)
}
})
4、总结
- Vue是一个轻量的MVVM框架
- 在Vue2中主要使用了Object.defineProperty()函数实现了数据响应式
- Vue2响应式存在的问题及解决办法
- Vue3中使用了Proxy代理和Reflect反射，实现了响应式
