一，ref创建_基本类型的响应式数据
在 Vue 3 中，ref是创建响应式数据的核心 API 之一
** ref的基本概念**
ref用于创建一个可变的响应式数据引用，适用于任何类型的值（基本类型、对象、数组等）。- 通过
ref包装的值会被转换为一个响应式对象，其值存储在.value属性中。
你想让谁是响应式数据就把谁用ref包装起来。
不过在使用ref之前我们需要先引入ref
//引入ref
import { ref } from 'vue'
在Vue模版中ref会自动展开.value
就像这样
//数据
let name = ref('张三');
let age = ref(18);
let address = '北京';
let tel = '123456789';
在JS中必须要通过.value属性访问和修改ref的值。
//方法
function changeName(){
name.value = '李四';
}
function changeAge(){
age.value = 20;
}
function showTel(){
console.log(tel);
}
我们可以通过volar插件自动添加.value
在vscode中的拓展中可以找到勾选上即可
目前来说模版就是上面的数据部分，JS就是方法部分，其他的后面再说。
二，reactive对象类型的数据
reactive跟ref差不多就是定义的类型不同，不过reactive只能定义对象类型的数据，但是ref可以定义任何类型的值。
示例：
<template>
<div class="person">
<h2>一辆{{ car.brand }}，颜色是{{ car.color }}，价格为{{ car.price}}</h2>
<button @click="changePrice">加价</button>
<br>
<h2>游戏列表</h2>
<!-- v-bind：key代表将后面双引号里的内容当成JS表达式来解析可以将v-bind省略只写一个：key -->
<ul>
<li v-for="g in games" v-bind:key="g.id"></li>
</ul>
<button @click="changeFirstGameName">
修改第一个游戏的名字
</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive} from 'vue'
//reactive可以定义数组
let car = reactive({brand : '梅赛德斯', color: 'red', price: 200000})
let games = reactive([{id: 1, name: '金铲铲之战'}, {id: 2, name: '原神'}, {id: 3, name: '王者荣耀'}])
function changePrice() {
car.price += 10000
console.log(car.price)
}
function changeFirstGameName() {
games[0].name = '无畏契约'
}
</script>
但是用ref定义对象类型的数据，底层还是靠reactive来实现
三，reactive和ref的区别
区别：
1.ref创建的变量必须使用.value
2.reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
function changeCar(){
Object.assign（car,{brand:'bwm',price:999999}）
}
就像这样如果想要同时更改品牌和价格就需要这样写。
如果你使用reactive页面不会更新。
- 使用原则
1，若需要一个基本类型的响应式数据，必须使用ref
2，若需要一个响应式对象，层级不深，ref，reactive都可以
3，若需要一个响应式对象，且层级较深，推荐使用reactive。