• 首页
  • 游戏下载
  • 正文

    • Vue3 reactive响应式赋值页面不渲染的解决_vue.js_

    更新时间：2023-05-24 23:13:49      浏览量：333

    Vue3 reactive响应式赋值页面不渲染

    问题描述

    //声明变量 let data = reactive([]) http().then(res=>{   data = res.data   console.log(data) }) //data数据更新，页面没有渲染

    1.因数据结构而导致的未渲染解决方法

    依旧是reactive，可以在外面包一层

    //声明 let state = reactive({   data:[] }) //赋值 state.data= res.data

    改为ref赋值

    //声明 let data = ref([]) //赋值 data.value = res.data

    2.因页面节点未加载导致页面未渲染解决方法

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

    3.因未指到具体点未渲染解决方法

    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 响应式原理-reactive

    Reactivity模块基本使用

    reactive方法会将对象变成proxy对象， effect中使用reactive对象时会进行依赖收集，稍后属性变化时会重新执行effect函数。

    编写reactive函数

    const reactiveMap = new WeakMap(); // 缓存列表 const mutableHandlers: ProxyHandler = {     get(target, key, receiver) {         // 等会谁来取值就做依赖收集         const res = Reflect.get(target, key, receiver);         return res;     },     set(target, key, value, receiver) {         // 等会赋值的时候可以重新触发effect执行         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); // 如果已经代理过则直接返回代理后的对象      if (exisitingProxy) {         return exisitingProxy;     }     const proxy = new Proxy(target, mutableHandlers); // 对对象进行代理     reactiveMap.set(target,proxy)     return proxy; }
    这里必须要使用Reflect进行操作，保证this指向永远指向代理对象
    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进行代理，如果对象已经被代理过，再次重复代理则返回上次代理结果。 那么，如果将一个代理对象传入呢？
    以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 
    您可能感兴趣的文章:
            
        
    
        
    
        
    网站类容多为转载，如有侵权，请联系站长删除
    

        
    
                    上一个：前端开发使用Ant Design项目评价_React_
                    下一个：关于element-ui中@selection-change执行两次的问题_vue.js_
                  
    
        
    
        
    
          
        
    
      
    
    
    
      
     最新相关发布