一、值類型與引用類型

1.1 定義和說明

在JavaScript中，數據類型可以分為兩類：值類型（或基本數據類型）和引用類型。

值類型（基本數據類型）：

• undefined

• null

• boolean

• number

• string

• symbol（ES6 新增）

引用類型：

• Object

• Array

• Function

• Date

• RegExp

值類型和引用類型的主要區別在于它們在內存中的存儲方式不同：

1、值類型：存儲在棧內存中，每個變量擁有一個獨立的內存空間，并且存儲的是數據本身。

2、引用類型：存儲在堆內存中，變量存儲的是數據的引用地址，真實的數據存儲在堆內存中。

下面是一個簡單的例子來說明這兩種類型的區別：

// 值類型示例
let a = 10;
let b = a;
b = 20;
console.log(a); // 輸出 10，因為a仍然是10// 引用類型示例
let obj1 = new Object();
obj1.name = 'John';let obj2 = obj1;
obj2.name = 'Jane';console.log(obj1.name); // 輸出 'Jane'，因為obj1和obj2指向同一個對象

在上面的例子中，a是一個值類型變量，改變b的值不會影響a。而obj1和obj2是引用類型變量，改變obj2的屬性會影響obj1，因為它們引用的是同一個對象實例。?

1.2 區別：

值類型：

1、占用空間固定，保存在棧中（當一個方法執行時，每個方法都會建立自己的內存棧，在這個方法內定義的變量將會逐個放入這塊棧內存里，隨著方法的執行結束，這個方法的內存棧也將自然銷毀了。因此，所有在方法中定義的變量都是放在棧內存中的；棧中存儲的是基礎變量以及一些對象的引用變量，基礎變量的值是存儲在棧中，而引用變量存儲在棧中的是指向堆中的數組或者對象的地址，這就是為何修改引用類型總會影響到其他指向這個地址的引用變量。）

2、保存與復制的是值本身

3、使用typeof檢測數據的類型

4、基本類型數據是值類型

引用類型：

1、占用空間不固定，保存在堆中（當我們在程序中創建一個對象時，這個對象將被保存到運行時數據區中，以便反復利用（因為對象的創建成本通常較大），這個運行時數據區就是堆內存。堆內存中的對象不會隨方法的結束而銷毀，即使方法結束后，這個對象還可能被另一個引用變量所引用（方法的參數傳遞時很常見），則這個對象依然不會被銷毀，只有當一個對象沒有任何引用變量引用它時，系統的垃圾回收機制才會在核實的時候回收它。）

2、保存與復制的是指向對象的一個指針

3、使用instanceof檢測數據類型

4、使用new()方法構造出的對象是引用型

二、ref介紹

在Vue 3.0中，ref是一個函數，用來創建一個響應式的引用對象（reactive reference），可以用來跟蹤單個響應式值。使用ref的主要目的是在組件中保存狀態。

沒有ref的話，你可以直接使用響應式變量，但是在組件外部無法獲取到這個變量的響應式特性。

下面是使用ref的例子：

<template><div>{{ count }}</div><button @click="increment">Increment</button>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return { count, increment };}
}
</script>

在上面的例子中，count是一個響應式引用對象，通過.value屬性訪問實際的值，并在點擊按鈕時增加計數。如果沒有使用ref()，那么count僅僅是一個普通的JavaScript基本類型，無法保持響應式。