目录

• Vue3 reactive响应式赋值页面不渲染
• 问题描述
• 1.因数据结构而导致的未渲染解决方法
• 2.因页面节点未加载导致页面未渲染解决方法
• 3.因未指到具体点未渲染解决方法
• Vue3 响应式原理-reactive
• Reactivity模块基本使用
• 编写reactive函数

Vue3 reactive响应式赋值页面不渲染
问题描述

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

1.因数据结构而导致的未渲染解决方法
依旧是reactive，可以在外面包一层

//声明let state = reactive({data:[]})//赋值state.data= https://www.it610.com/article/res.data

改为ref赋值

//声明let data = https://www.it610.com/article/ref([])//赋值data.value = res.data

【Vue3|Vue3 reactive响应式赋值页面不渲染的解决】
2.因页面节点未加载导致页面未渲染解决方法

import {nextTick} from 'vue'const func = async ()=>{await nextTick()state.data= https://www.it610.com/article/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