Vue3第五天，ref 和 reactive的介绍和区别

ref 创建：基本类型的响应式数据

• 作用： 定义响应式变量。
• 语法： let xxx = ref(初始值) 。
• 返回值： 一个 RefImpl 的实例对象，简称 ref对象 或 ref ， ref 对象的 value 属性是响应式的 。
• 注意点：
• JS 中操作数据需要： xxx.value ，但模板中不需要 .value ，直接使用即可。
• 对于 let name = ref(‘张三’) 来说， name 不是响应式的， name.value 是响应式的。

<template>

<div class="person">

<h2>姓名：{{name}}</h2>
 #技术分享
<h2>年龄：{{age}}</h2>

<button @click="changeName">修改名字</button>

<button @click="changeAge">年龄+1</button>

<button @click="showTel">点我查看联系方式</button>

</div>

</template>

<script setup lang="ts" name="Person">

import {ref} from 'vue' // name 和 age 是一个 RefImpl 的实例对象，简称 ref 对象，它们的 value 属性是响应式的。let name = ref('张三') let age = ref(18) // tel 就是一个普通的字符串，不是响应式的 let tel = '13888888888'

function changeName(){ // JS 中操作 ref 对象时候需要.value name.value = '李四' console.log(name.value)

// 注意：name 不是响应式的，name.value 是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san') } function changeAge(){ // JS 中操作 ref 对象时候需要.value age.value += 1 console.log(age.value) } function showTel(){ alert(tel) } </script>

C reactive 创建：对象类型的响应式数据

• 作用： 定义一个 响应式对象 （基本类型不要用它，要用 ref ，否则报错）
• 语法： let 响应式对象= reactive(源对象) 。
• 返回值： 一个 Proxy 的实例对象，简称：响应式对象。
• 注意点： reactive 定义的响应式数据是“深层次”的。

<template>

<div class="person">

<h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>

<h2>游戏列表：</h2>

<ul>

<li v-for="g in games" :key="g.id">{{ g.name }}</li>

</ul>

<h2>测试：{{obj.a.b.c.d}}</h2>

<button @click="changeCarPrice">修改汽车价格</button>

<button @click="changeFirstGame">修改第一游戏</button>

<button @click="test">测试</button>

</div>

</template>

<script lang="ts" setup name="Person">

import { reactive } from 'vue'

// 数据 let car = reactive({ brand: '奔驰', price: 100 }) let games = reactive([ { id: 'ahsgdyfa01', name: '英雄联盟' }, { id: 'ahsgdyfa02', name: '王者荣耀' }, { id: 'ahsgdyfa03', name: '原神' } ]) let obj = reactive({ a:{ b:{ c:{ d:666 } } } })

function changeCarPrice() { car.price += 10 } function changeFirstGame() { games[0].name = '流星蝴蝶剑' } function test(){ obj.a.b.c.d = 999 } </script>

ref 创建：对象类型的响应式数据

• 实则 ref 接收的数据可以是： 基本类型 、 对象类型 。
• 若 ref 接收的是对象类型，内部实则也是调用了 reactive 函数。

<template>

<div class="person">

<h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>

<h2>游戏列表：</h2>

<ul>

<li v-for="g in games" :key="g.id">{{ g.name }}</li>

</ul>

<h2>测试：{{obj.a.b.c.d}}</h2>

<button @click="changeCarPrice">修改汽车价格</button>

<button @click="changeFirstGame">修改第一游戏</button>

<button @click="test">测试</button>

</div>

</template>

<script lang="ts" setup name="Person">

import { ref } from 'vue'

// 数据 let car = ref({ brand: '奔驰', price: 100 }) let games = ref([ { id: 'ahsgdyfa01', name: '英雄联盟' }, { id: 'ahsgdyfa02', name: '王者荣耀' }, { id: 'ahsgdyfa03', name: '原神' } ]) let obj = ref({ a:{ b:{ c:{ d:666 } } } })

console.log(car)

function changeCarPrice() { car.value.price += 10 } function changeFirstGame() { games.value[0].name = '流星蝴蝶剑' } function test(){ obj.value.a.b.c.d = 999 } </script>

C ref 对比 reactive

宏观角度看：

ref 用来定义： 基本类型数据 、 对象类型数据 ；

reactive 用来定义： 对象类型数据 。

• 区别：

ref 创建的变量必须使用 .value （可以使用 volar 插件自动添加 .value ）。

1. reactive 重新分配一个新对象，会 失去 响应式（可以使用 Object.assign 去整体替换）。
2. 使用原则：

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

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

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

好了，今天的 ref 和 reactive 就先讲到这里，明天我们来唠唠 toRefs 与 toRef，感谢大家观看，我们明天见。