快捷導(dǎo)航

Vue3 reactive響應(yīng)式賦值頁面不渲染的解決

更新時(shí)間：2022年08月12日 10:32:42 作者：原萊_

這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁面不渲染的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue3 reactive響應(yīng)式賦值頁面不渲染

問題描述

//聲明變量
let data = reactive([])
http().then(res=>{
? data = res.data
? console.log(data)
})
//data數(shù)據(jù)更新，頁面沒有渲染

1.因數(shù)據(jù)結(jié)構(gòu)而導(dǎo)致的未渲染解決方法

依舊是reactive，可以在外面包一層

//聲明
let state = reactive({
? data:[]
})
//賦值
state.data= res.data

改為ref賦值

//聲明
let data = ref([])
//賦值
data.value = res.data

2.因頁面節(jié)點(diǎn)未加載導(dǎo)致頁面未渲染解決方法

import {nextTick} from 'vue'
const func = async ()=>{
?? ?await nextTick()
?? ?state.data= res.data
}

3.因未指到具體點(diǎn)未渲染解決方法

const state = reactive({
?? ?data:[{
?? ??? ?name:'tom',
?? ??? ?age:3
?? ?},...]
})
const func = async ()=>{
?? ?//state.data.forEach(item=>{
?? ?//?? ?item.age = 4//未生效
?? ?//})
?? ?state.data.forEach((item,index)=>{
?? ??? ?state.data[index].age = 4
?? ?})
}

Vue3 響應(yīng)式原理-reactive

Reactivity模塊基本使用

<div id="app"></div>
<script src="./reactivity.global.js"></script>
<script>
? ? const { reactive, effect, shallowReactive, shallowReadonly, readonly } = VueReactivity;
? ? // let state = reactive({ name: 'jw', age: 30 });
? ? // const state = shallowReactive({ name: 'jw', age: 30 })
? ? // const state = readonly({ name: 'jw', age: 30 })
? ? const state = reactive({ name: 'jw', age: 30})
? ? effect(() => { // 副作用函數(shù) (effect執(zhí)行渲染了頁面)
? ? ? ? app.innerHTML = state.name + '今年' + state.age + '歲了'
? ? });
? ? setTimeout(() => {
? ? ? ? state.age++;
? ? }, 1000)
</script>

reactive方法會(huì)將對象變成proxy對象， effect中使用reactive對象時(shí)會(huì)進(jìn)行依賴收集，稍后屬性變化時(shí)會(huì)重新執(zhí)行effect函數(shù)。

編寫reactive函數(shù)

const reactiveMap = new WeakMap(); // 緩存列表
const mutableHandlers: ProxyHandler<object> = {
? ? get(target, key, receiver) {
? ? ? ? // 等會(huì)誰來取值就做依賴收集
? ? ? ? const res = Reflect.get(target, key, receiver);
? ? ? ? return res;
? ? },
? ? set(target, key, value, receiver) {
? ? ? ? // 等會(huì)賦值的時(shí)候可以重新觸發(fā)effect執(zhí)行
? ? ? ? const result = Reflect.set(target, key, value, receiver);
? ? ? ? return result;
? ? }
}
function createReactiveObject(target: object, isReadonly: boolean) {
? ? if (!isObject(target)) {
? ? ? ? return target
? ? }
? ? const exisitingProxy = reactiveMap.get(target); // 如果已經(jīng)代理過則直接返回代理后的對象?
? ? if (exisitingProxy) {
? ? ? ? return exisitingProxy;
? ? }
? ? const proxy = new Proxy(target, mutableHandlers); // 對對象進(jìn)行代理
? ? reactiveMap.set(target,proxy)
? ? return proxy;
}

這里必須要使用Reflect進(jìn)行操作，保證this指向永遠(yuǎn)指向代理對象

let school = {
? ? name:'zf',
? ? get num(){
? ? ? ? return this.name;
? ? }
}
let p = new Proxy(school,{
? ? get(target, key,receiver){
? ? ? ? console.log(key);
? ? ? ? // return Reflect.get(target,key,receiver)
? ? ? ? return target[key]
? ? }
})
p.num

將對象使用proxy進(jìn)行代理，如果對象已經(jīng)被代理過，再次重復(fù)代理則返回上次代理結(jié)果。那么，如果將一個(gè)代理對象傳入呢？

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: