vue3中如何更新数据

最新推荐文章于 2025-02-22 09:11:45 发布

原创最新推荐文章于 2025-02-22 09:11:45 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

vue随手记专栏收录该内容

2 篇文章

订阅专栏

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

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);
      });
    }