Vue3.0-Ref

一、值类型与引用类型

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基本类型，无法保持响应式。