关于vue中数组转换的问题

如何将这种数组

img


转换为这种数组

img

前者的数组是通过vue实现的，也就是数组添加之后得到的数据，而后者则是The real Array

有实验链接：https://codepen.io/sam9029/pen/xxJqNLL

  • 解构就可以实现
    vue2，vue3 都支持

data() {
    return {
      message: 'Welcome to Vue!',
      myarr:[1,2,3]
    };
  },
  //   直接解构
  mounted(){
    console.log('hi',this.myarr)
    console.log('hilfter',[...this.myarr])
  },
  • vue3还有提供了转为原生对象的 API toRaws() (但只能用于 reactive 定义的对象)
// vue3 Composition API
import {ref,reactive,toRaw} from 'vue';
let amyarr = ref([1,2,3])  
let bmyarr = reactive([5,6,4])

console.log("ref",amyarr)
console.log("refAfter",[...amyarr.value])
  
  
console.log("reactive",bmyarr)
console.log("reactiveAfter",[...bmyarr])
console.log("reactiveAfterRaw",toRaw(bmyarr))

逻辑上可以先创一个新数组后遍历原本的数组赋值，实现如下：

// 1
let res1 = new Array();
for(let i=0;i<arr.length;i++){
    res1.push(arr)
}
// 2 
let res2 = [...arr];

数组拷贝的api都可以，但最优雅的写法是使用扩展运算符

const b =  [...a]  // a,b对应你的1,2张截图