Vue3 TypeScript中如何将接收的props数组拷贝到data实现可编辑

• 第一种写法失效原因：数组属于引用类型，直接将this.items赋值给ditems，本质是两个变量指向同一个内存地址，修改ditems仍等同于修改只读props，同时会触发Vue的props修改警告。
• 第二种写法失效原因：
  1. 变量名不匹配，你声明了pitems存储拷贝结果，但return的是未定义的ditems，最终ditems为undefined
  2. 你要拷贝的是数组，却用Object.assign({}, ...)把结果转成了对象，就算改成数组拷贝Object.assign([], this.items)也只是浅拷贝，若数组内嵌套对象，修改嵌套属性仍会影响原props。

1. 浅拷贝（仅适用于数组元素为基础类型/单层对象场景） #

可以用数组扩展运算符、slice方法、Array.from实现浅拷贝：

data() {
  return {
    // 写法1：扩展运算符
    ditems: [...this.items]
    // 写法2：slice方法
    // ditems: this.items.slice()
    // 写法3：Array.from
    // ditems: Array.from(this.items)
  }
}

2. 深拷贝（适用于数组元素为多层嵌套对象场景） #

如果数组内包含多层嵌套对象，需要用深拷贝切断引用关联：

data() {
  return {
    // 无特殊类型（函数、Symbol、undefined等）时可以用JSON序列化方案
    ditems: JSON.parse(JSON.stringify(this.items))
    // 项目引入lodash时可以直接调用cloneDeep方法
    // ditems: _.cloneDeep(this.items)
  }
}

3. 适配props动态更新场景 #

如果父组件传入的items会动态变更，需要加监听器同步更新ditems：

watch: {
  items: {
    immediate: true,
    deep: true,
    handler(newVal) {
      // 按需求选择浅拷贝/深拷贝方式赋值
      this.ditems = JSON.parse(JSON.stringify(newVal))
    }
  }
}

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