1.reactive
- reactive根据传入的对象，创建一个深度响应式对象。响应式对象属性值改动，不管层级多深，都会触发响应式。
- reactive只能给对象添加响应式，对于值类型，比如String,Number,Boolean,Symbol是不可以的
- 不能通过…person方式结构，这样会丢失响应式
<template>
<h1>一个人的信息</h1>
<h2>姓名：{
{
person.name}}</h2>
<h2>年龄：{
{
person.age}}</h2>
<h3>工作种类：{
{
person.job.type}}</h3>
<h3>工作薪水：{
{
person.job.salary}}</h3>
<h3>爱好：{
{
person.hobby}}</h3>
<h3>测试的数据{
{
person.job.a.b.c}}</h3>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {
reactive } from '@vue/reactivity'
export default {
name: 'App',
setup(){
let person = reactive({
name:"张三",
age:18,
job:{
type:"前端工程师",
salary:"30k",
a:{
b:{
c:666
}
}
},
hobby:['抽烟','喝酒','烫头']
})
// 方法
function changeInfo(){
person.name = '李四'
person.age= 48
person.job.type = 'UI设计师'
person.job.salary = '60k'
person.job.a.b.c = 999
person.hobby[0] = '学习'
}
return {
person, //不能通过...person方式结构，会丢失响应式
changeInfo
}
}
}
</script>
2.ref
- ref用于为数据添加响应式状态，比如String,Number,Boolean,Symbol添加响应式就要用到ref
- 获取数据值的时候加.value
- 参数可以传递任意数据类型，传递对象类型时也能保持深度响应，适用性更广
<template>
<h1>一个人的信息</h1>
<h2>姓名：{
{
name}}</h2>
<h2>年龄：{
{
age}}</h2>
<h3>工作种类：{
{
job.type}}</h3>
<h3>工作薪水：{
{
job.salary}}</h3>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {
ref } from '@vue/reactivity'
export default {
name: 'App',
setup(){
//为基本数据类型添加响应式
let name = ref('张三')
let age = ref(18)
//为复杂的数据类型添加响应式
let job = ref({
type:'前端工程师',
salary:"30k"
})
// 方法
function changeInfo(){
name.value = '李四'
age.value = 48
job.value.type = 'UI设计师'
job.value.salary = '60k'
}
return {
name,
age,
job,
changeInfo
}
}
}
</script>
3.toRef
- 针对响应式对象(reactive)的prop(属性)创建一个ref，保持响应式
- 接收连个参数：源响应式对象和属性名，返回一个ref数据
- 获取数据值的时候需要加.value
- toRef后的ref数据如果是复杂数据类型时，不是原始数据的拷贝，而是引用，改变结果数据的值也会改变原始数据
<template>
<h2>姓名：{
{
person.name}}</h2>
<h2>年龄：{
{
person.age}}</h2>
<h2>薪资：{
{
person.job.j1.salary}}</h2>
<button @click="person.name+='~'">修改信息</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.j1.salary++">涨薪</button>
</template>
<script>
import {
reactive, toRef} from "vue";
export default {
name: "Demo",
setup() {
//数据 响应式对象
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
//通过toRef创建一个ref响应式
const name2 = toRef(person,'name')
//5秒后改变 两者保持引用关系
setTimeout(()=>{
name2.value = '343434'
},5000)
//6秒后改变 两者保持引用关系·
setTimeout(()=>{
person.name = '666666'
},6000)
return {
person,
name2,
age:toRef(person,'age'),
salary:toRef(person.job.j1,'salary')
};
},
};
</script>
4.toRefs
- toRefs是一种用于破坏响应式对象并将其所有属性转换为ref的实用方法。
- 获取数据值的时候需要加.value
- toRef后的ref数据如果是复杂数据类型时，不是原始数据的拷贝，而是引用，改变结果数据的值也会改变原始数据
作用跟toref类似，toRef是对一个个属性手动赋值，而toRefs是自动解构赋值
<template>
//不推荐这种方式
<h2>姓名：{
{
person.name}}</h2>
<h2>年龄：{
{
person.age}}</h2>
//return需要{...toRefs(person)}
<h2>姓名：{
{
name}}</h2>
<h2>年龄：{
{
age}}</h2>
<h2>薪资：{
{
job.j1.salary}}</h2>
<button @click="name+='~'">修改信息</button>
<button @click="age++">增长年龄</button>
<button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import {
reactive, toRef} from "vue";
export default {
name: "Demo",
setup() {
//数据 响应式对象
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
person,//不建议使用这这方法
...toRefs(person)
};
},
};
</script>