Vue3数据更新但是Dom不更新(dom更新不及时)已解决
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
近期搬砖过程中第一次用到vue3遇到了不少阻碍所以记录一下
数据从接口返回并获取,但是dom没有及时更新。解决是解决了,但是原理还没搞懂,希望有大佬能解答一下,感谢!
一开始需要渲染的数据是这么写的:
let listData = reactive(
[
{
name: "总数",
type: "",
value: 0,
},
{
name: "类型一",
type: "1",
value: 0,
},
{
name: "类型二",
type: "2",
value: 0,
},
],
);
初始化dom渲染没问题,控制台并没有报错,但是从接口获取到数据赋值之后dom并没有更新,三个种类的value还是0。切换条件之后接口返回 新数据并赋值,但是dom竟然渲染的是 上一次 接口返回的数据。
后来把代码改成这样记好了,实时数据返回赋值之后能实时渲染到dom上了:
let listData = reactive(
{
list: [
{
name: "总数",
type: "",
value: 0,
},
{
name: "类型一",
type: "1",
value: 0,
},
{
name: "类型二",
type: "2",
value: 0,
},
],
}
);
等于是把数组包裹在一个响应式对象中
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)