一、前言
- 在Vue3中,如果数据不是响应式数据,当数据的值发生改变时,页面上的数据是不会发生改变的。
- 因此本文主要介绍Vue3中响应式数据的使用,包括ref和reactive的基本使用。
二、ref
1、ref —— 创建基本类型的响应式数据
- ref 可以定义基本类型的响应式变量
- 语法 :
let xxx=ref(初始值)
- 返回值:
是一个RefImpl的实例对象,简称ref对象或ref,ref对象中的value属性是响应式的。 - 其他:
在JS中操作数据需要使用 "xxx.value"的形式,但在模板中不需要用. value,直接使用即可。
(1)引入ref
import {ref} from ' vue '
(2)代码
- 代码解析
- 完整代码
<template><p>个人信息:</p><p>性别:{{ gender }}</p><p>年龄:{{ age }}</p><button @click="ageChange">点击年龄加1</button>
</template><script setup>
import { ref } from "vue";// 数据
let gender = ref("女");
let age = ref(25);// 方法
function ageChange() {age.value += 1;
}
</script>
-
结果:
-
点击按钮,响应式数据会在页面上发生变化:
2、ref —— 创建对象类型的响应式数据
ref也可以创建对象类型的响应式数据。
(1)代码解析
- ref可以定义以下类型的数据:
-
修改ref的数据时记得.value的使用以及使用顺序:
-
在模板中,不需要使用.value
(2)完整代码
<template><p>小明的年龄是:{{ info.age }} 岁</p><p>小明的身高是:{{ info.height }} cm</p><button @click="ageChange">点击年龄加1</button><button @click="heightChange">点击身高加1</button><br /><h2>星座列表:</h2><ul><li v-for="item in Constellation" :key="item.id">{{ item.star }}</li></ul><button @click="ConstellationChange">点击修改第二个星座名称</button>
</template><script setup>
import { ref } from "vue";// 数据
let info = ref({age: 20,height: 165,
});
let Constellation = ref([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);// 方法
function ageChange() {info.value.age += 1;
}
function heightChange() {info.value.height += 1;
}
function ConstellationChange() {Constellation.value[1].star = "处女座";
}
</script>
三、reactive
1、概念
reactive只能定义对象类型的响应式数据,例如:
- 数据1:
let info = reactive({age: 20,height: 165,
});
- 数据2:
let Constellation = reactive([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);
- 而以下代码是错误的(reactive不能定义基本类型的数据):
let name=reactive("张三")
2、代码
<template><p>小明的年龄是:{{ info.age }} 岁</p><p>小明的身高是:{{ info.height }} cm</p><button @click="ageChange">点击年龄加1</button><button @click="heightChange">点击身高加1</button><br /><h2>星座列表:</h2><ul><li v-for="item in Constellation" :key="item.id">{{ item.star }}</li></ul>
</template><script setup>
import { reactive } from "vue";// 数据
let info = reactive({age: 20,height: 165,
});
let Constellation = reactive([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);// 方法
function ageChange() {info.age += 1;
}
function heightChange() {info.height += 1;
}
</script>
-
结果:
-
点击按钮,响应式数据会在页面上发生变化:
3、注意事项
- reactive重新分配一个新对象, 会失去响应式;可以使用object . assign去整体替换,举例:
原本有数据如下:
// 数据
let info = reactive({age: 20,height: 165,
});
点击按钮对整体数据进行修改:
function infoChange() {info={age: 30,height: 185,
}
}
但是这样修改数据之后,点击按钮数据并不会修改:
而使用object . assign可以让页面的数据进行更新:
function infoChange() {Object.assign(info, {age: 30,height: 185,});
}
结果如下:
四、总结
- ref可以定义基本类型数据、对象类型数据;reactive只能定义对象类型数据
- 若需要一个响应式对象,层级不深,ref 、reactive 都可以
- 若需要一个响应式对象,且层级较深,推荐使用reactive