Vue 3.0回應式系統編程概述
- 一、 3.0回應式
- 二、 核心方法
- 三、 proxy回顧
- 四、 原始碼實作
- 4.1 reactive（只能轉換物件）
- 4.2 依賴收集
- 4.3 effect、 track
- 4.4 trigger 觸發更新
- 4.5 ref
- 4.6 toRefs
- 4.7 computed
- 五、完整示例代碼
隨著Vue3.0的正式發布,前端又多了一門需要學習的功課，本文主要是對vue3.0回應式系統的簡單剖析及實作：
一、 3.0回應式
- 使用Proxy物件實作屬性監聽
- 多層屬性嵌套，在訪問屬性程序中處理下一級屬性
- 默認監聽動態添加的屬性
- 默認監聽屬性的洗掉操作
- 默認監聽陣列索引和length屬性
- 可以作為單獨的模塊使用
二、 核心方法
- reactive (將物件轉換為回應式物件)
- ref （將基本型別的值轉為具有一個value屬性的回應式物件）
- toRefs （解構回應式物件資料）
- computed
- effect(watch依賴的的底層函式)
- track（收集依賴）
- trigger （觸發更新）
三、 proxy回顧
1. set和deleteProperty中需要回傳布爾型別的值
'use strict'
// 問題1： set和deleteProperty中需要回傳布爾型別的值
// 嚴格模式下，如果回傳false的話，會出現TypeError的例外
const target = {
foo: 'xxx',
bar: 'yyy'
}
// Reflect.getPrototypeOf()
// Object.getPrototypeOf()
const proxy = new Proxy(target, {
get (target, key, receiver) {
// return target[key]
return Reflect.get(target, key, receiver)
},
set (target, key, value, receiver) {
// target[key] = value
return Reflect.set(target, key, value, receiver)
// 這里得寫return 不寫默認回傳undefined
//Reflect.set執行成功或者失敗會回傳布爾型別的值
},
deleteProperty(target, key) {
// delete target[key]
return Reflect.deleteProperty(target, key) // 這里得寫return
}
})
proxy.foo = 'zzz'
2. Proxy和Reflect中使用receiver
- Proxy中receiver: Proxy或者繼承Proxy的物件
- Reflect中receiver：如果target物件設定了getter，getter中的this指向receiver
執行
this.bar的時候，如果第三個引數receiver不傳，getter中this指向obj物件，此時proxy.foo為undefined
執行this.bar的時候，如果第三個引數receiver傳， this指向代理物件，也就是獲取target.bar, 此時proxy.foo為value - bar
const obj = {
get foo () {
console.log(this)
return this.bar
}
}
const proxy = new Proxy(obj, {
get(target, key, receiver) {
if (key === 'bar') {
return 'value - bar'
}
// 執行this.bar的時候，如果第三個引數receiver不傳，getter中this指向obj物件，此時proxy.foo 為undefined
// 執行this.bar的時候，如果第三個引數receiver傳， this指向代理物件，也就是獲取target.bar, 此時proxy.foo 為value - bar
return Reflect.get(target, key, receiver)
}
})
console.log(proxy.foo) // value - bar
四、 原始碼實作
4.1 reactive（只能轉換物件）
- 接受一個引數，判斷這個引數是否是物件
- 創建攔截器物件handler，設定get/set/deleteProperty
- 回傳Proxy物件
代碼實作：
// 工具方法
const isObject = val => val !==null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
const hasOwnproperty = Object.prototype.hasOwnProperty;
const hasOwn = (target, key) => hasOwnproperty.call(target, key)
export function reactive (target) {
if (!isObject(target)) return target;
const handler = {
get (target, key, receiver) {
//此處收集依賴 - track
console.log('get', key)
const result = Reflect.get(target, key, receiver);
return convert(result)
},
set (target, key, value, receiver) {
let result = true;
const oldValue = Reflect.get(target, key, receiver)
if (oldValue !== value) {
result = Reflect.set(target, key, value, receiver)
//此處觸發更新 - trigger
console.log('set', key, value)
}
return result
},
deleteProperty(target, key) {
const haskey = hasOwn(target, key)
const result = Reflect.deleteProperty(target, key)
if (haskey && result) {
//此處觸發更新 - trigger
console.log('delete', key)
}
return result
}
}
return new Proxy(target, handler);
}
實際使用：
<body>
<script type="module">
import { reactive } from './reactivity/index.js'
const obj = reactive({
name: 'zs',
age: 18
})
obj.name = 'lisi'
delete obj.age
console.log(obj)
</script>
</body>
輸出結果：
set name lisi
delete age
Proxy {name: “lisi”}
4.2 依賴收集
weakMap:弱參考，當失去參考會被銷毀
vue3.0中依賴是一個三層的樹形結構，我們會在最外層定義一個new weakMap()的集合targetMap，當我們觸發get時使用track方法收集依賴時首先判斷當前是否存在一個activeEffect物件,不存在直接回傳,存在則首先判斷當前target在targetMap的集合中是否存在，如果不存在就在targetMap的集合中創建對應的集合depsMap,然后判斷當前key在depsMap中是否存在,如果不存在就在depsMap的集合中創建對應的集合dep,將對應的依賴activeEffect收集到對應key值對應的dep集合中，
4.3 effect、 track
- effect：引數為一個函式（第一次會執行一次），當函式的回應式物件發生改變，就會重新執行一次函式
- track: 收集依賴的函式
let activeEffect = null; //當前活動的函式
export function effect(callback) {
activeEffect = callback; //設定當前活動物件
callback() //此時會訪問回應式物件的屬性，需要收集依賴
activeEffect = null;
}
let targetMap = new WeakMap() // 收集依賴的集合
export function track(target, key) { //收集依賴的函式
if (!activeEffect) return
let depsMap = targetMap.get(target) //獲取當前依賴集合中target對應的值
if(!depsMap) {
targetMap.set(target, (depsMap = new Map())) //不存在則設定一個target對應的new Map()值
}
let dep = depsMap.get(key) //獲取當前依賴集合中target對應的集合中 key屬性對應的值
if(!dep) {
depsMap.set(key, (dep = new Set()))//不存在則在depsMap中設定一個key屬性對應的new Set()值
}
dep.add(activeEffect) //將當前的活動物件添加到key屬性對應的 Set集合中
}
4.4 trigger 觸發更新
export function trigger(target, key) {//觸發更新
const depsMap = targetMap.get(target); // 找到target物件對應的集合
if (!depsMap) return;
const dep = depsMap.get(key) //找到key對應的dep集合
if(dep) {//執行每個依賴于key（回應式物件的值）值函式
dep.forEach(effect => effect())
}
}
4.5 ref
可以接受物件或者基礎型別，如果是回應式物件直接回傳，是物件則內部會呼叫reactive將其轉換為回應式物件，如果是普通的值則轉為具有一個value屬性的回應式物件
export function ref(raw) {
// 判斷raw是否是ref創建的物件，如果是的話直接回傳
if (isObject(raw) && raw.__v_isRef)return
let value = convert(raw)
const r = {
__v_isRef: true, //特殊標識
get value () {
track(r, 'value') //收集依賴
return value
},
set value (newValue) {
if(newValue !== value) {
raw = newValue
value = convert(raw) //將得到的新值設定為回應式物件
trigger(r, 'value') // 觸發更新
}
}
}
return r
}
以上我們可以知道 reactive vs ref
-
ref可以把基本資料型別資料轉換成回應式物件
-
ref回傳的物件，重新賦值成物件也是回應式的
-
reactive回傳的物件，重新賦值丟失回應式
-
reactive回傳的物件不可解構
-
reactive
const product = reactive({ name: 'iPhone', price: 5000, count: 3 }) -
ref
const price = ref(5000) const count = ref(3)
4.6 toRefs
傳入的物件必須是reactive回傳的回應式物件（proxy物件）然后將傳入物件的屬性轉換為類似ref回傳的物件然后將屬性掛載在一個新的物件上回傳，如果不是回應式物件（proxy物件）直接回傳.
export function toRefs (proxy) {
//如果是陣列我們創建一個新的陣列 否則回傳空物件
const ret = proxy instanceof Array ? new Array(proxy.length) : {}
for (const key in proxy) {
// 將每一項轉換為類似ref的物件
ret[key] = toProxyRef(proxy, key)
}
return ret
}
function toProxyRef (proxy, key) {
const r = {
__v_isRef: true,
get value () {
return proxy[key]//這里不收集依賴是因為proxy是回應式物件，當我們訪問回應式物件屬性會觸發get方法自動收集依賴
},
set value (newValue) {
proxy[key] = newValue//這里不需要觸發更新是因為proxy是回應式物件，當我們重新賦值會觸發回應式物件的set方法觸發更新
}
}
return r
}
4.7 computed
接受一個有回傳值的函式作為引數,回傳的值就是計算屬性的值并且會監聽函式中的回應式資料的變化
export function computed (getter) {
const result = ref()
effect(() => (result.value = getter()))
return result
}
五、完整示例代碼
https://gitee.com/liannian9/fed-e-task-03-05/tree/master/code/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/01-reactivity
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/136168.html
標籤：其他