Vue Composition API中reactive包裹的数组挂载后更新未触发DOM渲染如何解决

问题根源 #

你遇到的不更新问题是两种错误赋值方式导致的：

1. 直接执行items = posts：reactive返回的是响应式引用，直接整体赋值会把这个引用覆盖为普通的非响应式数组，同时你setup返回的还是最初的响应式数组引用，赋值操作根本不会作用到返回的数据上，自然不会触发视图更新。
2. 执行items.values = posts：只是给响应式数组加了一个自定义的values属性，但模板中判断的是items.length、传递给子组件的也是数组本身的内容，和你新增的values属性没有关联，不会触发更新。

解决方案 #

方案1：使用ref定义数组（推荐） #

数组类型优先用ref定义，直接修改value属性即可触发响应式更新，代码修改如下：

import { ref, onMounted } from "vue";
import { posts } from "./fake-data.js";
export default {
  setup() {
    const items = ref([]);
    
    onMounted(() => {
      items.value = posts;
    });
    
    return {
      items,
    };
  },
};

模板部分不需要做任何修改。

方案2：保留reactive定义，修改原数组内容 #

如果坚持用reactive定义数组，不要替换整个引用，通过splice方法修改原数组的内容，保持响应式引用不变：

import { reactive, onMounted } from "vue";
import { posts } from "./fake-data.js";
export default {
  setup() {
    const items = reactive([]);
    
    onMounted(() => {
      // 清空原数组后插入所有新数据
      items.splice(0, items.length, ...posts);
    });
    
    return {
      items,
    };
  },
};

方案3：reactive包裹为对象属性 #

将数组作为reactive对象的一个属性存储，直接修改对象属性即可触发响应式：

import { reactive, onMounted, toRefs } from "vue";
import { posts } from "./fake-data.js";
export default {
  setup() {
    const state = reactive({
      items: []
    });
    
    onMounted(() => {
      state.items = posts;
    });
    
    // 用toRefs解构保证响应式不丢失
    return {
      ...toRefs(state),
    };
  },
};

模板同样不需要修改。

内容的提问来源于stack exchange，提问作者Evan