开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
前言
响应式是 Vue 最独特的特性之一，作为一名 Vue 框架的忠实粉丝，今天就和大家一起看看 Vue 的响应式都做了些什么
什么是Vue响应式
“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码，即数据发生变化后，会重新对页面渲染，这就是Vue响应式
这意味着我们只需要专注于数据的管理，而不用过于频繁的去操作界面的更新，交给 vue 就好，给我们搬砖提供了很大的便利
想要完成这个过程，需要做什么
- 侦测数据的变化
Vue2 使用了数据劫持，Vue3 采用了数据代理来侦测数据的变化
- 收集视图依赖了哪些数据
Vue要能够知道一个数据是否被使用，实现这种机制的技术叫做依赖收集
- 数据变化时，自动通知需要更新的视图部分，并进行更新
采用发布订阅模式
发布订阅者的实现思路
- 维护一个缓存列表（事件调度中心）
- 订阅者把函数 fn 添加到缓存列表中（订阅者注册事件到调度中心）
- 发布者在事件发生时通知调度中心（发布者发布事件到调度中心，调度中心处理代码）
如何侦测数据的变化？
有 2 种方法可以侦测数据的变化，实现数据劫持 / 数据代理
- Object.defineProperty
数据劫持指借助 getter / setter 改变之前的访问逻辑
- ES6的 Proxy
Object.defineProperty
介绍
defineProperty 是 Object 上的一个构造函数方法
主要用来精确的定义对象的属性配置，这个方法就是在一个对象上定义一个新的属性，或者改变一个对象现有的属性，并且返回这个对象。里面有两个字段 set,get。顾名思义，set都是取设置属性的值，而get就是获取属性的值
- 特点
Object.defineProperty(obj, prop, descriptor)
默认使用 Object.defineProperty 定义出来的对象属性不可修改，不可删除，不可枚举
- 配置
value: 值, // 获取值 和 get() 只能用一个
enumerable: true, // 可枚举
writable: true, // 修改值 和 set() 只能用一个
configurable: true, // 可配置，删除
get() // 数据劫持
set(newValue) // 数据劫持
实现
Vue 通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
- 示例
function render () {
//set的时候会走这里，重新渲染
console.log('模拟视图渲染')
}
let data = {
name: '测试',
location: { x: 100, y: 100 }
}
observe(data)
- 核心函数
function observe (obj) { // 我们来用它使对象变成可观察的
// 判断类型
if (!obj || typeof obj !== 'object') {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
function defineReactive (obj, key, value) {
// 递归子属性
observe(value)
Object.defineProperty(obj, key, {
enumerable: true, //可枚举（可以遍历）
configurable: true, //可配置（比如可以删除）
get: function reactiveGetter () {
console.log('get', value) // 监听
return value
},
set: function reactiveSetter (newVal) {
observe(newVal) //如果赋值是一个对象，也要递归子属性
if (newVal !== value) {
console.log('set', newVal) // 监听
render()
value = newVal
}
}
})
}
}
- 改变data的属性，会出发set；然后获取data的属性，会触发get
data.location = {
x: 1000,
y: 1000
} //打印 set {x: 1000,y: 1000} 模拟视图渲染
data.name //打印 get 测试
这样一个发布订阅者模式就完成了
Proxy
由于基于
Object.defineProperty实现的响应有一些缺陷：
- 深度监听需要递归到底，性能层面考虑不太好
- 无法监听对象新增属性和删除属性，需要vue特殊处理
- 无法监听原生数组，需要在数组原型上做拦截
于是 vue3 采用了proxy去重构了响应式原理，proxy能够很好的解决Object.defineProperty的缺点
介绍
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
const p = new Proxy(target, handler)
- target
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
- handler
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为
实现
// 定义处理函数
const handler = {
// get捕捉器-获取属性值
get (target, prop) {
console.log(`拦截了读取数据: 属性${prop}`)
return target
},
// set捕捉器-修改属性值或者是添加属性
set (target, prop, value) {
target[prop] = value
console.log(`拦截了修改数据或者是添加属性: 属性${prop},属性值${value}`)
return target
},
// deleteProperty捕捉器-删除某个属性
deleteProperty (target, prop) {
delete target[prop]
console.log(`拦截了删除数据: 属性${prop}`)
return target
}
//...一共13个配置项（捕捉器）
}
// 使用Proxy,此时p就是代理后的对象了
const p = new Proxy({}, handler);
// 验证修改/添加属性（会走到handler的set捕捉器方法）
p.name = '小明'
// 验证读取属性（会走到handler的set捕捉器方法）
p.name
// 验证删除属性（会走到handler的deleteProperty捕捉器方法）
delete p.name
