一、ref
(1)ref是什么
-
ref 可以生成任何类型的响应式数据
-
ref 通过 .value 来修改值
(2)代码
<template>
<div>
<h2>{{ name }}{{ age }}岁</h2>
<h2>改变次数:{{ state.count }}</h2>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const name = ref('小李')
const age = ref(18)
const state = ref({
count: 0,
})
setTimeout(() => {
name.value = '小红'
age.value = 20
// 注:引用类型赋值时必须加上.value,否则会丢失响应性
state.value.count ++
}, 2000)
return {
name,
age,
state,
}
},
}
</script>
(3)注意
-
ref对引用类型的变量创建响应式,其根本是当你给ref传入引用类型,则调用reactive方法为其创建响应式
-
ref只能操作浅层次的数据,把基本数据类型当作自己的属性值;深层次依赖于reactive
二、reactive
(1)reactive是什么
-
reactive可以生成引用类型的响应式数据
-
直接获取数据值,不需要加.value
(2)代码
<template>
<div>
<h2>{{ user.name }}{{ user.age }}岁</h2>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const user = reactive({
name: '小李',
age: 18
})
// 测试响应式效果
setTimeout(() => {
user.name = '小红'
user.age = 20
}, 2000)
return {
user
}
},
}
</script>
三、toRef
(1)toRef是什么
- 如果要将响应式reactive对象中的某个属性单独提供给外部使用,且不丢失响应式,就用 toRef
- toRef 接受两个参数:响应式对象;响应式对象中的属性名
- toRef返回一个ref数据,需要通过 .value 来修改值
(2)代码
<template>
<div>
<h2>user.age: {{ user.age }}</h2>
<h2>ageRef: {{ ageRef }}</h2>
</div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
name: 'App',
setup() {
const user = reactive({
name: '小李',
age: 18
})
const ageRef = toRef(user, 'age')
// 测试响应式效果
setTimeout(() => {
user.age = 20
}, 2000)
setTimeout(() => {
ageRef.value = 30
}, 3000)
return {
user,
ageRef
}
},
}
</script>
四、toRefs
(1)toRefs是什么
- toRefs接收一个响应式 reactive 对象作为参数,它会将对象的所有属性执行toRef,转换为响应式的 ref 属性,需要通过.value来修改值
- 如果通过ES6的解构赋值操作直接解构响应式对象 ,那么解构出来的对象会失去响应式,而使用toRefs不会失去响应式
(2)代码
<template>
<div>
<h2>{{ name }}{{ age }}岁</h2>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'App',
setup() {
const user = reactive({
name: '小李',
age: 18
})
const { age } = toRefs(user)
// 测试响应式效果
setTimeout(() => {
user.name = '小红'
// toRefs将属性转换为响应式的ref属性,需要通过.value来修改值
age.value = 20
}, 2000)
return {
// ...user, // 直接解构会失去响应式
...toRefs(user) // 通过toRefs解构不会失去响应式
}
},
}
</script>
结论:
-
ref主要用于基本类型的响应;reactive主要用于引用类型的响应
-
toRef将某个响应式对象中的属性变成响应式数据;toRefs作用其实和 toRef 类似,只不过 toRef 是对一个个属性手动赋值,而 toRefs 是对整个对象自动解构赋值