ref
和reactive
是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别:
ref
定义单个响应式数据
- 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。
- 返回一个响应式对象,该对象包含一个
.value
属性,可用于获取和设置数据。- 底层采用Object.defineProperty()实现
reactive
定义多个响应式数据
- 数据类型必须是对象
- 返回一个响应式对象,必须使用响应式对象来获取属性和设置数据
- 底层采用的是new Proxy()
reactive源码解析
reactive
函数可以用来创建一个响应式的对象,它会在内部使用Proxy
对对象的 getter 和 setter 进行拦截,从而实现对数据的依赖收集和通知更新。在vue3源码里,reactive的实现在core-main\packages\reactivity\src\reactive.ts文件中
reactive是一个函数,接收传入的target对象。返回一个createReactiveObject方法。
reactive的核心逻辑在createReactiveObject方法中。
- 首先校验传入的target必须是对象;
- 通过new Proxy创建一个代理对象,根据对象的类型走不同的handler处理逻辑;
- 返回代理对象proxy
proxy是怎么代理的?
手写一个简易的reactive,看下handler里是什么
let handler = {
//拦截整个对象,访问对象的属性时get拦截器触发
get(target, key) {