深浅谈关于 Vue3 的 Proxy 和 Reflect 实现响应式原理

置顶还是一个小白

已于 2023-06-16 11:16:54 修改

阅读量698

点赞数 1

分类专栏：前端个人笔记 vue.js 文章标签： javascript 开发语言 ecmascript vue.js vue es6

于 2023-06-15 19:40:40 首次发布

本文链接：https://blog.csdn.net/weixin_47002682/article/details/131206024

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

个人笔记

10 篇文章 0 订阅

订阅专栏

vue.js

8 篇文章 0 订阅

订阅专栏

一、关于 Proxy

Proxy 是 ES6 的一个新特性，它是一个可以拦截并自定义对目标对象的操作的特殊对象。（如属性查找、赋值、枚举、函数调用等）

语法：

// target ： 需要封装的目标对象
// handler ： 一些属性方法的集成（占位符对象）
const proxy = new Proxy(target, handler);

常用的语法

拦截对属性的读取操作
get(target, property, receiver)
拦截对属性的写入操作
set(target, property, value, receiver)
拦截函数的调用
apply(target, thisArg, argumentsList)
判断对象是否拥有某个属性
has(target, property)
拦截删除属性的操作
deleteProperty(target, property)

更加具体详细文档

Proxy 模拟实现响应式

// 目标对象
const target = {
  name: 'xiaowen',
  age: 23
};

// 占位符对象的一些方法
const handler = {
  get(target, property) {
    return target[property];
  },
  set(target, property, value) {
    target[property] = value;
  }
};

const proxy = new Proxy(target, handler);

// 调用 handler 的 get 方法
console.log(proxy.name)

// 调用 handler 的 set 方法
proxy.age = 25

二、关于 ref

官方说法：接受一个内部值，返回一个响应式的、可更改的 ref 对象（reference），此对象只有一个指向其内部值的属性 .value （就是将一个值变成了一个对象，并且通过.value访问到内部属性）。使用 ref 函数可以将普通的数据转换为响应式数据，使其能够自动追踪依赖并在数据变化时触发重新渲染。

它可以处理的数据为值、对象、数组

const title = ref('自我介绍')

const person = ref({
	name:'xiaowen',
	age:23
})

console.log(title.value)					// 自我介绍
console.log(person.value.name)		// xiaowen

基本类型的处理

和 Vue2 的响应式原理一样，通过 object.defineProperty（）中的 get 和 set 来进行数据劫持

`对象类型的处理（注意）`:

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

下面是源码部分（GitHub 仓库）

在这里插入图片描述

三、关于 reactive

用于将一个普通对象转换为响应式对象。它会递归地将对象的所有属性转换为响应式属性，并返回一个对象的响应式代理。

`原理`

通过封装 ES6 的 Proxy代理来实现（上面有讲大概实现方式）

const title = reactive('自我介绍')

const person = reactive({
	name:'xiaowen',
	age:23
})

console.log(title)					// 出现警告信息
console.log(person.name)		// xiaowen