Vue3数据变更后页面未重新渲染问题求助

云原生阿岚

2026-7-9

Vue3 CDN模式下数组变更页面不更新的问题解决

你当前的问题是普通数组无法触发Vue的响应式更新：你定义的items是原生JS数组，没有被Vue的响应式系统处理，所以即使定时器里执行push添加了新元素，Vue无法追踪到这个变化，页面也就不会重新渲染。

错误核心

title用ref()包裹后成为响应式对象，修改它会触发页面更新
items是普通数组，不在Vue的响应式追踪范围内，任何修改都不会同步到视图

解决方案1：用`ref()`包裹数组

把数组用ref()包裹，转为响应式对象，修改时通过.value访问原数组：

const { createApp, ref } = Vue;

createApp({
  setup() {
    const title = ref('Fruits');
    // 用ref包裹数组，转为响应式对象
    const items = ref(['apple', 'orange', 'banana']);

    setTimeout(() => {
      // ref包裹的数组需通过.value操作原数组
      items.value.push('grapes');
    }, 4000);

    return { title, items };
  }
}).mount('#app');

解决方案2：用`reactive()`管理响应式状态

如果习惯用对象统一管理数据，可以把数组放在reactive创建的响应式对象中：

const { createApp, reactive, toRefs } = Vue;

createApp({
  setup() {
    const title = ref('Fruits');
    // 创建包含数组的响应式对象
    const state = reactive({
      items: ['apple', 'orange', 'banana']
    });

    setTimeout(() => {
      // 直接操作响应式对象中的数组
      state.items.push('grapes');
    }, 4000);

    // 用toRefs解构，方便模板直接使用items
    return { title, ...toRefs(state) };
  }
}).mount('#app');