[Vue3核心语法] ref、reactive响应式数据
定义:
-
ref
用来定义:基本类型数据、对象类型数据; -
reactive
用来定义:对象类型数据。
使用原则:
-
若需要一个基本类型的响应式数据,必须使用
ref
。 -
若需要一个响应式对象,层级不深,
ref
、reactive
都可以。 -
若需要一个响应式对象,且层级较深,推荐使用
reactive
。reactive 则适用于复杂对象或数组的响应式数据。
访问方式不同
- ref:使用 .value 属性来访问和修改值。
- reactive:可以直接访问和修改对象或数组的属性或元素,而无需使用 .value。
响应式数据:
-
ref
创建的变量必须使用.value
(可以使用Vue - Official插件自动添加.value
)。敲代码时需要等一秒左右才弹出
name.
value相当于拿到地址name只是拿到值
-
reactive
重新分配一个新对象,会失去响应式(可以使用Object.assign
去整体替换)。let a=reactive(xxx)
a=reactive(bbb)此时a不是响应式数据,a地址被改变了
在第一行代码中,a
变量指向了xxx
的响应式对象。
在第二行代码中,a
被重新赋值为bbb
的响应式对象,此时a
的地址(指向的内存位置)发生了改变。
更详细内容看下面:
一、ref 创建:基本类型的响应式数据
-
作用:定义响应式变量。
-
语法:
let xxx = ref(初始值)
。 -
返回值:一个
RefImpl
的实例对象,简称ref对象
或ref
,ref
对象的value
属性是响应式的。 -
注意点:
-
JS(script)
中操作数据需要:xxx.value
,但模板(template)中不需要.value
,直接使用即可。 -
对于
let name = ref('张三')
来说,name
不是响应式的,name.value
是响应式的。 -
name.
value相当于拿到地址name只是拿到值
-
-
示例代码
<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>
二、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>
三、reactive 创建:对象类型的响应式数据
只能用于响应式对象,reactive
定义的响应式数据是“深层次”的。值不需要.value
<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>