SoFunction
Updated on 2025-04-03

The solution to the reactive reactive assignment page not rendered

Vue3 reactive responsive assignment page does not render

Problem description

//Declare variableslet data = reactive([])
http().then(res=>{
  data = 
  (data)
})
//dataData update，The page is not rendered

1. Solutions for unreleased due to data structures

Still reactive, you can wrap a layer outside

//statementlet state = reactive({
  data:[]
})
//Assignment=

Change to ref assignment

//statementlet data = ref([])
//Assignment =

2. Solution to the page not being rendered because the page node is not loaded

import {nextTick} from 'vue'
const func = async ()=>{
    await nextTick()
    = 
}

3. Solutions are not rendered because they have not pointed to specific points

const state = reactive({
    data:[{
        name:'tom',
        age:3
    },...]
})
const func = async ()=>{
    //(item=>{
    //      = 4//Not effective    //})
    ((item,index)=>{
        [index].age = 4
    })
}

Vue3 Responsive Principle - reactive

Basic use of Reactivity module

<div ></div>
<script src="./"></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(() => { // Side effect function (effect executes rendering the page)         =  + 'This year' +  + 'It's old'
    });
    setTimeout(() => {
        ++;
    }, 1000)
</script>

The reactive method will turn the object into a proxy object. When using the reactive object in effect, the dependency collection will be performed. The effect function will be re-executed later when the attribute changes.

Write reactive functions

const reactiveMap = new WeakMap(); // Cache listconst mutableHandlers: ProxyHandler<object> = {
    get(target, key, receiver) {
        // If anyone gets the value, do dependency collection        const res = (target, key, receiver);
        return res;
    },
    set(target, key, value, receiver) {
        // When the value is assigned, the effect execution can be triggered again.        const result = (target, key, value, receiver);
        return result;
    }
}
function createReactiveObject(target: object, isReadonly: boolean) {
    if (!isObject(target)) {
        return target
    }
    const exisitingProxy = (target); // If you have already been proxyed, you will directly return to the proxy object.    if (exisitingProxy) {
        return exisitingProxy;
    }
    const proxy = new Proxy(target, mutableHandlers); // Proxy the object    (target,proxy)
    return proxy;
}

Here you must use Reflect to ensure that this points to always point to the proxy object

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

Use proxy to proxy the object. If the object has been proxyed, repeat the proxy again and returns the result of the last proxy. So, what if you pass a proxy object in?

The above is personal experience. I hope you can give you a reference and I hope you can support me more.