前言
响应式是 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
