一 ref 定义响应式数据
在 Vue 3 中,ref 是一个用于创建响应式数据的 API。ref 可以用来使普通的 JavaScript 值(如字符串、数字、对象等)变得响应式,从而在 Vue 的模板中使用和自动更新。
- 基本用法
- 导入 ref:首先,你需要从 Vue 中导入 ref。
- 创建响应式数据:使用 ref 创建一个响应式的值。
- 访问和更新响应式数据:你可以通过 .value 属性来访问和更新响应式数据。
- **作用:**定义响应式变量。
- 语法:
let xxx = ref(初始值)
。 - **返回值:**一个
RefImpl
的实例对象,简称ref对象
或ref
,ref
对象的value
属性是响应式的。 - 注意点:
JS
中操作数据需要:xxx.value
,但模板中不需要.value
,直接使用即可。- 对于
let name = ref('张三')
来说,name
不是响应式的,name.value
是响应式的。
- ref 创建:基本类型的响应式数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 ref 示例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>当前计数: {{ count }}</p>
<button @click="increment">增加计数</button>
</div>
<script>
const { ref, createApp } = Vue;
createApp({
setup() {
// 创建一个响应式的计数器
const count = ref(0);
// 定义增加计数的函数
function increment() {
count.value++;
}
// 返回响应式数据和方法以供模板使用
return {
count,
increment
};
}
}).mount('#app');
</script>
</body>
</html>
- ref 创建:对象类型的响应式数据:
const { ref, createApp } = Vue;
createApp({
setup() {
const state = ref({
name: 'Alice',
age: 30
});
const items = ref([1, 2, 3]);
function updateName(newName) {
state.value.name = newName;
}
function addItem(item) {
items.value.push(item);
}
return {
state,
items,
updateName,
addItem
};
}
}).mount('#app');
二 reactive定义响应式数据
在 Vue 3 中,reactive 是一个用于创建响应式对象的 API。与 ref 主要用于处理基本数据类型不同,reactive 适用于处理更复杂的数据结构,如对象和数组。使用 reactive 创建的对象会对其属性的变化进行响应式更新。
- 作用:定义一个响应式对象(基本类型不要用它,要用
ref
,否则报错) - 语法:
let 响应式对象= reactive(源对象)
。 - **返回值:**一个
Proxy
的实例对象,简称:响应式对象。 - 注意点:
reactive
定义的响应式数据是“深层次”的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 reactive 示例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>姓名: {{ state.name }}</p>
<p>年龄: {{ state.age }}</p>
<button @click="updateName('Bob')">更改姓名</button>
<button @click="incrementAge">增加年龄</button>
</div>
<script>
const { reactive, createApp } = Vue;
createApp({
setup() {
// 创建一个响应式对象
const state = reactive({
name: 'Alice',
age: 30
});
// 更新对象的属性
function updateName(newName) {
state.name = newName;
}
function incrementAge() {
state.age++;
}
// 返回响应式对象和方法以供模板使用
return {
state,
updateName,
incrementAge
};
}
}).mount('#app');
</script>
</body>
</html>
说明
- 创建响应式对象:
- const state = reactive({ name: ‘Alice’, age: 30 }); 将一个包含 name 和 age
属性的对象转化为响应式对象。
- 访问和更新响应式对象:
- 在模板中,你可以直接使用 state.name 和 state.age。 在 JavaScript 代码中,你可以直接通过 state.name 和 state.age 访问和修改这些属性。
- 响应式更新:
- 当你更新 state 对象的属性时,例如调用 updateName(‘Bob’) 或 incrementAge(),Vue会自动更新视图。
三 ref 和reactive 的区别
宏观角度看:
ref
用来定义:基本类型数据、对象类型数据;reactive
用来定义:对象类型数据。
- 区别:
ref
创建的变量必须使用.value
(可以使用volar
插件自动添加.value
)。reactive
重新分配一个新对象,会失去响应式(可以使用Object.assign
去整体替换)。
- 使用原则:
- 若需要一个基本类型的响应式数据,必须使用
ref
。- 若需要一个响应式对象,层级不深,
ref
、reactive
都可以。- 若需要一个响应式对象,且层级较深,推荐使用
reactive
。
ref
- 用途:
- 用于创建对基本数据类型(如 string、number、boolean)的响应式引用。
- 也可以用于创建对对象或数组的响应式引用,但在这种情况下,ref 本身是对对象或数组的一个“包裹”。
- 创建方式:
const value = ref(initialValue);
- 访问和更新:
- 对于基本数据类型,使用 .value 进行访问和更新。例如:
value.value = 10
。 - 对于对象或数组,可以使用 .value 访问和修改它们的内容,但
.value
只是用于访问 ref包裹的内容。具体的更新和访问内容会通过.value
进行。
reactive
1 用途:
- 用于创建对复杂数据结构(如对象和数组)的响应式引用。
- 自动将整个对象或数组的属性变为响应式,而不需要显式地使用 .value。
2 创建方式:
const state = reactive(initialObject);
3 访问和更新:
- 直接通过对象或数组的属性访问和更新,不需要 .value。例如:
state.name = 'Alice'
。
四 toRefs 与 toRef
- 作用:将一个响应式对象中的每一个属性,转换为
ref
对象。 - 备注:
toRefs
与toRef
功能一致,但toRefs
可以批量转换。 - 语法如下:
<template>
<div class="person">
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>性别:{{person.gender}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeGender">修改性别</button>
</div>
</template>
<script lang="ts" setup>
import {ref,reactive,toRefs,toRef} from 'vue'
// 数据
let person = reactive({name:'张三', age:18, gender:'男'})
// 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力
let {name,gender} = toRefs(person)
// 通过toRef将person对象中的gender属性取出,且依然保持响应式的能力
let age = toRef(person,'age')
// 方法
function changeName(){
name.value += '~'
}
function changeAge(){
age.value += 1
}
function changeGender(){
gender.value = '女'
}
</script>