Vue3（ref与reactive）

一，ref创建_基本类型的响应式数据

在 Vue 3 中，ref是创建响应式数据的核心 API 之一

** ref的基本概念**

ref用于创建一个可变的响应式数据引用 ，适用于任何类型的值（基本类型、对象、数组等）。
通过ref包装的值会被转换为一个响应式对象 ，其值存储在.value属性中。

你想让谁是响应式数据就把谁用ref包装起来。

不过在使用ref之前我们需要先引入ref

vue 复制代码

//引入ref
import { ref } from 'vue'

在Vue模版中ref会自动展开.value

就像这样

vue 复制代码

//数据
let name = ref('张三');
let age = ref(18);
let address = '北京';
let tel = '123456789';

在JS中必须要通过.value属性访问和修改ref的值。

js 复制代码

//方法
function changeName(){
    name.value = '李四';
}
function changeAge(){
    age.value = 20;
}
function showTel(){
    console.log(tel);
}

我们可以通过volar插件自动添加.value

在vscode中的拓展中可以找到勾选上即可

目前来说模版就是上面的数据部分，JS就是方法部分，其他的后面再说。

二，reactive对象类型的数据

reactive跟ref差不多就是定义的类型不同，不过reactive只能定义对象类型的数据，但是ref可以定义任何类型的值。

示例：

vue 复制代码

<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去整体替换）

vue 复制代码

function changeCar(){
Object.assign（car,{brand:'bwm',price:999999}）
}

就像这样如果想要同时更改品牌和价格就需要这样写。

如果你使用reactive页面不会更新。

使用原则

1，若需要一个基本类型的响应式数据，必须使用ref

2，若需要一个响应式对象，层级不深，ref，reactive都可以

3，若需要一个响应式对象，且层级较深，推荐使用reactive。