vue3中如何更新数据

原创于 2021-04-13 18:23:56 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

vue随手记专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Vue 3中使用TypeScript时，如何通过`reactive`实现对象属性和数组操作的高效更新。讲解了为何直接赋值可能不触发视图更新，并提供了使用`Object.assign`和数组`push`的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3中开始全面使用TS，当我们将一个对象做个可侦听对象时，reactive实际捕捉的是内部属性的变化，我们需要通过拷贝的方式才能触发页面更新，数组必须使用push的方式

 let cluster = reactive({} as Cluster);
 let hostList = reactive([] as Hosts[]);

async function Init() {
      await getAllCluster().then((rep) => {
        Object.assign(cluster, rep.data[0]);
      });
      await getHostsWithPage(1,2).then((rep) => {
        hostList.length = 0;
        hostList.push(...rep.data);
      });
    }