vue项目给两个变量赋同一个值问题

async getRoleList() {
  let list = await roleList()
  if (list && list.data.code == 0) {
    this.roleList = list.data.data
    this.roleListDialog = list.data.data
    this.roleList.unshift({
      roleId: '',
      roleName:"全部"
    })
  }
}

问题：this.roleListDialog和this.roleList数据中都包含全部选项？

原因：因为list.data.data 是数组是引用数据类型，所以并不是赋的值，而是将list.data.data的引用地址付给了this.roleListDialog和this.roleLis这两个对象，所以它们都指向list.data.data这个内存空间，所以就会出现文章开头的那一幕，修改了一个另一个也会变（此情景为了实现“分成两份”可以参考浅拷贝与深拷贝）


实现方法1：
this.roleListDialog = JSON.parse(JSON.stringify(list.data.data))

基础中的基础，哎。。。。。。。。。。。。。。。。