在之前的文章里小浪介绍过Vue2的呼应式原理,谈论中有掘友谈论想让我介绍Vue3的呼应式原理,那么在这篇文章中小浪来带咱们来简略手写一下Vue3中的几个呼应式api
Proxy
首要得先来介绍一下Proxy这个强壮的API:
在Vue3中运用Proxy目标来代替 Vue 2 中依据 Object.defineProperty,消除了 Vue 2 中依据 Object.defineProperty 所存在的一些限制,比方无法监听数组索引,length特点等等
在Proxy中默认监听动态增加特点和特点的删去操作,就很便利
Proxy合作Reflect运用,Reflect是ES6呈现的新特性,代码运行期间用来设置或获取目标成员(操作目标成员),Reflect没有呈现前运用Object的一些办法比方 Object.getPrototypeOf,
Reflect也有对应的办法 Reflect.getPrototypeOf
,两者都是相同的,不过Reflect更有语义。
下面来看一下根本的运用
const target = {
name: '小浪',
age: 22,
}
const handler = {
get(target, key, receiver) {
console.log(`获取目标特点${key}值`)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
console.log(`设置目标特点${key}值`)
return Reflect.set(target, key, value, receiver)
},
deleteProperty(target, key) {
console.log(`删去目标特点${key}值`)
return Reflect.deleteProperty(target, key)
},
}
const proxy = new Proxy(target, handler)
console.log(proxy.age)
proxy.age = 21
console.log(delete proxy.age)
输出
获取目标特点age值
22
设置目标特点age值
删去目标特点age值
true
target:参数表明所要阻拦的目标目标
handler:参数也是一个目标,用来定制阻拦行为
留意:
-
this 要害字表明的是署理的 handler 目标,所以不能运用this而是要用 receiver传递,
receiver
代表当时proxy目标 或许 承继proxy的目标,它确保传递正确的 this 给 getter,setter -
set
和deleteProperty
也需求回来(增加return
),回来的是一个布尔值,设置/删去成功回来true,反之回来false
reactive
了解了上面的Proxy和Reflect,咱们来看一下reactive的完成,reactive,回来proxy目标,这个reactive可以深层次递归,假如发现子元素存在引证类型,递归处理。
// 判别是否为目标 ,留意 null 也是目标
const isObject = val => val !== null && typeof val === 'object'
// 判别key是否存在
const hasOwn = (target, key) => Object.prototype.hasOwnProperty.call(target, key)
export function reactive(target) {
// 首要先判别是否为目标
if (!isObject(target)) return target
const handler = {
get(target, key, receiver) {
console.log(`获取目标特点${key}值`)
// ... 这里还需求搜集依靠,先空着
const result = Reflect.get(target, key, receiver)
// 递归判别的要害, 假如发现子元素存在引证类型,递归处理。
if (isObject(result)) {
return reactive(result)
}
return result
},
set(target, key, value, receiver) {
console.log(`设置目标特点${key}值`)
// 首要先获取旧值
const oldValue = Reflect.get(target, key, reactive)
// set 是需求回来 布尔值的
let result = true
// 判别新值和旧值是否相同来决议是否更新setter
if (oldValue !== value) {
result = Reflect.set(target, key, value, receiver)
// 更新操作 等下再补
}
return result
},
deleteProperty(target, key) {
console.log(`删去目标特点${key}值`)
// 先判别是否有key
const hadKey = hasOwn(target, key)
const result = Reflect.deleteProperty(target, key)
if (hadKey && result) {
// 更新操作 等下再补
}
return result
},
}
return new Proxy(target, handler)
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
</head>
<body>
<script type="module">
import { reactive } from '../src/reactive.js'
const obj = {
name: '小浪',
age: 22,
test: {
test1: {
test2: 21,
},
},
}
const proxy = reactive(obj)
console.log(proxy.age)
proxy.test.test1.test2 = 22
console.log(delete proxy.age)
</script>
</body>
</html>
搜集依靠/触发更新
上面咱们还有get中搜集依靠没有完结,搜集依靠触及道track , effect 还有依靠地图,下面我给出一张图先介绍一下effect和track是如何搜集依靠的
呼应式次序:effect > track > trigger > effect
在组件烘托过程中,一个 effect 会会触发get,从而对值进行 track,当值发生改动,就会进行 trigge,履行 effect 来完结一个呼应
那么先来完成 effect
effect
effect的完成很简略
// activeEffect 表明当时正在走的 effect
let activeEffect = null
export function effect(callback) {
activeEffect = callback
callback()
activeEffect = null
}
track
然后便是对 track 的完成
// targetMap 表里每个key都是一个一般目标 对应他们的 depsMap
let targetMap = new WeakMap()
export function track(target, key) {
// 假如当时没有effect就不履行追寻
if (!activeEffect) return
// 获取当时目标的依靠图
let depsMap = targetMap.get(target)
// 不存在就新建
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()))
}
// 依据key 从 依靠图 里获取到到 effect 集合
let dep = depsMap.get(key)
// 不存在就新建
if (!dep) {
depsMap.set(key, (dep = new Set()))
}
// 假如当时effectc 不存在,才注册到 dep里
if (!dep.has(activeEffect)) {
dep.add(activeEffect)
}
}
最终增加到hander 里 get 中
get(target, key, receiver) {
// ...
// 搜集依靠
track(target, key)
// ...
},
触发更新
经过上面的图,咱们知道在set中运用trigger函数来触发更新,咱们来完成一下吧
// trigger 呼应式触发
export function trigger(target, key) {
// 拿到 依靠图
const depsMap = targetMap.get(target)
if (!depsMap) {
// 没有被追寻,直接 return
return
}
// 拿到了 视图烘托effect 就可以进行排队更新 effect 了
const dep = depsMap.get(key)
// 遍历 dep 集合履行里边 effect 副作用办法
if (dep) {
dep.forEach(effect => {
effect()
})
}
}
最终增加到hander 的 set 和 deleteProperty 中
set(target, key, value, receiver) {
// ...
if (oldValue !== value) {
result = Reflect.set(target, key, value, receiver)
trigger(target, key)
}
// ...
},
deleteProperty(target, key) {
// ...
if (hadKey && result) {
// 更新操作
trigger(target, key)
}
// ...
}
ref
把一个基础类型包装成一个有value呼应式目标(这里是运用get/set
存取器,来进行追寻和触发),假如是一般目标就调用 reactive 来创立呼应式目标
// 判别是否是一个目标,是就用 reactive 来署理
const convert = val => (isObject(val) ? reactive(val) : val)
class RefImpl {
constructor(_rawValue) {
this._rawValue = _rawValue
this.__v_isRef = true
// 判别 _rawValue 是否是一个目标
// 假如是目标调用reactive运用 proxy来署理
// 不是回来 _rawValue 本身
this._value = convert(_rawValue)
}
// 运用get/set 存取器,来进行追寻和触发
get value() {
// 追寻依靠
track(this, 'value')
// 当然 get 得回来 this._value
return this._value
}
set value(newValue) {
// 判别旧值和新值是否一向
if (newValue !== this._value) {
this._rawValue = newValue
// 设置新值的时分也得运用 convert 处理一下,判别新值是否是目标
this._value = convert(this._rawValue)
// 触发依靠
trigger(this, 'value')
}
}
}
export function ref(rawValue) {
// __v_isRef 用来标识是否是 一个 ref 假如是直接回来,不必再转
if (isObject(rawValue) && rawValue.__v_isRef) return rawValue
return new RefImpl(rawValue)
}
toRef
toRef
传入两个参数,目标目标,目标当中的特点名,它的回来成果便是特点名的可呼应式数据,便是将目标中的某个值转化为呼应式数据 toRef(obj,key)那么简略来完成一下
class ObjectRefImpl {
constructor(proxy, _key) {
this._proxy = proxy
this._key = _key
// __v_isRef 用来标识是否是 一个 ref
this.__v_isRef = true
}
get value() {
// 这里不必搜集依靠
// this._proxy 便是呼应式目标,当拜访[this._key]时,this._proxy里边会去自动搜集依靠
return this._proxy[this._key]
}
set value(newVal) {
// 这里不必搜集依靠
// this._proxy 呼应式目标,会在this._proxy里边set去调用trigger
this._proxy[this._key] = newVal
}
}
// 露出出去的办法
export function toRef(proxy, key) {
return new ObjectRefImpl(proxy, key)
}
测试
import { ref, effect, toRef, reactive } from '../src/reactive.js'
const obj = reactive({
name: '小浪',
})
const age = toRef(obj, 'age')
age.value = 21
console.log(obj)
effect(() => {
age.value = 22
})
console.log(obj)
原来的obj目标没有 age 特点,运用 toRef 增加了 age, 并且是呼应式的
差异于ref:
ref是对原始数据的复制,当修正ref数据时,模板中的视图会发生改动,但是原始数据并不会改动。 toRef是对原始数据的引证,修正toRef数据时,原始数据也会发生改动,但是视图并不会更新。
toRefs
想必这个咱们常常运用吧,平常假如运用reactive创立目标,咱们不能直接进行解构,咱们要运用 toRefs 帮助咱们进行解构, 把整个 reactive 创立的目标变成 一般目标, 然后把每个特点变成 ref 呼应式目标。那么直接上手写一下吧, 其实它的核心仍是运用了 toRef
export function toRefs(proxy) {
// 判别 当时 proxy 是 proxy 数组, 仍是 proxy 目标
const ret = proxy instanceof Array ? new Array(proxy.length) : {}
for (const key in proxy) {
// 内部仍是调用 toRef 进行转为 呼应式
ret[key] = toRef(proxy, key)
}
return ret
}
测试
import { reactive, toRefs } from '../src/reactive.js'
const obj = reactive({
name: '小浪',
age: 22,
})
const { name, age } = toRefs(obj)
console.log(obj)
name.value = '小云'
age.value = 21
console.log(obj)
测试成功,toRefs解构后的特点也是呼应式
代码
github
结语: 身边的小伙伴们都在准备秋招,这段时间除了实习之外的时间我也在慢慢准备,好久没更文了,感谢咱们一向以来对小浪的支持,持续加油努力学习!!!