赋值与解构

1. 赋值

let person = {
  age: 18,
  name: "张三",
  friends: ["王麻子"],
};
// 将引用类型数据赋值给新的变量(浅拷贝) 修改会影响到源数据
let shallowFriends = person.friends; // 浅拷贝
shallowFriends.push("李四");
console.log(person.friends); // [ '王麻子', '李四' ]
// 通过JSON.parse(JSON.stringify())实现深拷贝 修改不会影响到源数据
let deepFriends = JSON.parse(JSON.stringify(person.friends)); // 深拷贝
deepFriends.push("王五");
console.log(person.friends); // [ '王麻子', '李四' ]
// 将基本类型数据赋值给新的变量(深拷贝)
let newAge = person.age;
newAge = 20;
console.log(person.age); // 18

 2. 解构

普通解构（不存在引用关系）

let { age } = person;
age = 20; // 修改不会影响源数据
console.log(person.age); // 18

Vue中使用 Torefs 解构响应式数据（解构出的数据为响应式数据且修改时会影响源数据，源数据发生变化其值也会随之变化 ==> 解构出的变量等同于源数据中的变量）

const { page, pages, items } = toRefs(
    subTypes.value[activeTabIndex.value].goodsItems,
  )
page.value = 2  // 会影响subTypes中的数据