如何在VueJS 3组合式API中更新或删除ref的取值？

首先明确：你当前的写法是完全正确的 #

selectedElements.value.push(3)是合法的响应式更新写法，执行后返回Proxy {0: 3}属于正常现象：Vue3的响应式系统基于ES6 Proxy实现，当ref包裹引用类型（数组、对象）时，.value返回的就是被代理后的Proxy实例，操作它的体验和普通数组完全一致，Vue可以正常侦听到所有变更。 #

常见的ref数组正确操作方式 #

1. 直接调用数组变异方法 #

所有会修改原数组的原生方法都可以直接调用，无需额外赋值即可触发响应式更新：

• 支持的方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• 示例代码：

import { ref } from 'vue'

const myRef = ref([])
// 新增元素
myRef.value.push(1, 2)
// 删除最后一个元素
myRef.value.pop()
// 删除下标为1的元素，共删1个
myRef.value.splice(1, 1)
// 替换下标为0的元素
myRef.value.splice(0, 1, '替换后的值')

2. 非变异方法需重新赋值 #

如果使用filter()、map()、concat()、slice()这类返回新数组、不修改原数组的方法，需要把返回的新数组赋值给.value才能触发更新：

// 过滤出所有大于2的元素，重新赋值给ref
myRef.value = myRef.value.filter(item => item > 2)
// 全量替换整个数组
myRef.value = [3,4,5]

3. 特殊操作支持 #

Vue3已经解决了Vue2中数组响应式的遗留问题，以下操作也可以正常触发响应式：

// 直接按下标修改元素
myRef.value[0] = '新值'
// 直接修改数组长度
myRef.value.length = 0

仅ref取值变动时触发点击事件的实现 #

你可以通过点击时新旧值对比，或者侦听ref变化两种方式实现需求，参考代码：

import { ref, watch } from 'vue'

export default {
  setup() {
    const myRef = ref([])
    // 方案1：侦听ref变化，变动时自动执行对应逻辑
    watch(myRef, (newVal, oldVal) => {
      // 这里写需要触发的点击后逻辑
      console.log('ref值已变动', newVal)
    }, { deep: true })

    // 方案2：点击事件内主动判断是否有变更
    const handleClick = () => {
      const oldVal = JSON.stringify(myRef.value)
      // 执行修改ref的操作
      myRef.value.push(3)
      const newVal = JSON.stringify(myRef.value)
      if (oldVal !== newVal) {
        // 仅值变化时执行后续逻辑
        console.log('值已变更，执行点击事件逻辑')
      }
    }

    return {
      myRef,
      handleClick
    }
  }
}

内容的提问来源于stack exchange，提问作者herbert mühlex