近期搬砖过程中第一次用到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
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
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> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐