Vue 3中如何更新ref所包裹数组内部的单个属性值？

首先修正你示例代码的语法错误：JavaScript对象的键值对使用:作为分隔符，不支持=>写法，修正后基础代码如下：

export default defineComponent({
  setup() {
    const allQuestions = ref([{"like": 1},{"like": 0}]);
  }
})

要更新第二个元素的like属性，有两种常用的正确实现方式：

• 方式1：直接修改属性
  Vue3基于Proxy实现的响应式系统支持直接修改数组元素的属性，可正常触发响应式更新，写法如下：

allQuestions.value[1].like = 1;

注意：该写法仅适用于Vue3，Vue2的响应式系统无法监听到通过索引修改数组元素、直接修改数组长度的操作。

• 方式2：全量替换数组
  该写法兼容性更强，Vue2、Vue3版本通用，通过生成新数组替换旧数组的方式触发响应式更新：

allQuestions.value = allQuestions.value.map((item, index) => 
  index === 1 ? {...item, like: 1} : item
)

如果是Vue2的Options API场景，还可以使用$set方法实现更新：

this.$set(this.allQuestions, 1, {...this.allQuestions[1], like: 1})

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