Vue3中如何设置或删除data()内的响应式数据值？

官方文档说明：全局函数set和delete，以及实例方法$set和$delete在基于代理的变更检测机制中已不再需要。

直接使用原生JavaScript语法操作即可，无需调用任何Vue专属的工具方法 #

设置data内的属性值

不管是给已有属性赋值，还是给响应式对象新增之前不存在的属性，直接用普通赋值语法即可，框架会自动检测变更并触发响应式更新。
示例：

// data定义
data() {
  return {
    post: {
      title: '示例文章'
    }
  }
}

// 给已有的title属性赋值
this.post.title = '新的文章标题'

// 给post对象新增不存在的views属性，直接赋值即可触发响应
this.post.views = 1024

删除data内的属性值

直接使用原生delete操作符删除属性即可，操作后会自动触发视图同步更新。
示例：

// 删除post对象的views属性
delete this.post.views

额外注意 #

• 数组操作也完全支持原生语法，比如直接通过下标修改数组元素this.list[2] = '新元素'、直接修改数组长度this.list.length = 1都可以正常触发响应，不需要再用$set处理下标赋值的场景。
• 以上规则仅适用于Vue 3及以上版本，Vue 2版本仍需使用$set/$delete处理新增/删除属性的场景。

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