对象和引用类型的赋值都是通过引用传递的方式进行的，这意味着变量实际上存储的是对象的引用，而不是对象本身的副本

这篇博客我主要想解释一下这句话：对象和引用类型的赋值都是通过引用传递的方式进行的，这意味着变量实际上存储的是对象的引用，而不是对象本身的副本。

其实这段话早在学习JS的时候就接触过，只是被我丢进了“记忆垃圾桶”，但是昨天遇到的一个bug，让死去的回忆突然攻击我

问题引出

起因是我在编写一个酒店住客管理的代码（纯前端项目，Pinia持久化存储）

首先我将Pinia仓库中的住客信息渲染在表格中

 

然后，利用element-ui组件库的表格组件渲染数据，并利用该组件的行数据对象scope.row获取一行的数据赋值给drawerMessage.value

目的是通过表格的“查看/编辑”按钮去打开一个右侧弹出框，并渲染对应的行数据

然而神奇的事情发生了，我将檀健次改成多多，对应的表格数据竟然也同步变化了，更神奇的是，Pinia仓库中的数据也改变了

 

为了便于大家理解，我把相关代码放在这

<script setup>
import { ref } from 'vue'

import { useHotelStore } from '@/stores'
const hotelStore = useHotelStore()

// 右侧弹出框
const drawer = ref(false)
const drawerMessage = ref()

const openDraw = scope => {
  drawer.value = true
  drawerMessage.value = scope
}

</script>

<template>
  <!-- 住客列表 -->
  <div class="bigContainer">