持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章vue3知识点总结（二）中，我们学习了vue3的知识点，包括setup函数、生命周期、reactive函数、ref函数等相关知识点。今天，在这篇文章中，我们将继续学习vue3，包括toRef函数、toRefs函数、computed函数等相关知识点。
toRef函数
toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。它的使用场景是有一个响应式对象数据，但是模版中只需要使用其中一项数据。
<template>
<div class="container">
{{name}} <button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
const obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 模板中只需要使用name数据
// 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
// let { name } = obj 不能直接解构，出来的是一个普通数据
const name = toRef(obj, 'name')
// console.log(name)
const updateName = () => {
console.log('updateName')
// toRef转换响应式数据包装成对象，value存放值的位置
name.value = 'zs'
}
return {name, updateName}
}
}
</script>
toRefs函数
toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的。它的使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。
<template>
<div class="container">
<div>{{name}}</div>
<div>{{age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
const obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 解构或者展开响应式数据对象
// const {name,age} = obj
// console.log(name,age)
// const obj2 = {...obj}
// console.log(obj2)
// 以上方式导致数据就不是响应式数据了
const obj3 = toRefs(obj)
console.log(obj3)
const updateName = () => {
// obj3.name.value = 'zs'
obj.name = 'zs'
}
return {...obj3, updateName}
}
}
</script>
<style scoped lang="less"></style>
接下来我们练习一个案例，这个案例需要实现1. 记录鼠标坐标功能 2. 累加1功能。
实现记录鼠标坐标功能步骤：
- 定义一个响应式数据对象，包含x和y属性。
- 在组件渲染完毕后，监听document的鼠标移动事件
- 指定move函数为事件对应方法，在函数中修改坐标
- 在setup返回数据，模板中使用
实现累加1功能步骤：
- 定义一个简单数据类型的响应式数据
- 定义一个修改数字的方法
- 在setup返回数据和函数，模板中使用
<template>
<div class="container">
<div>坐标</div>
<div>x: {{x}}</div>
<div>y: {{y}}</div>
<hr>
<div>{{count}} <button @click="add">累加1</button></div>
</div>
</template>
<script>
import { onMounted, onUnmounted, reactive , ref, toRefs} from 'vue'
const useMouse = () => {
// 1. 记录鼠标坐标
// 1.1 申明一个响应式数据，他是一个对象，包含x y
const mouse = reactive({
x: 0,
y: 0
})
// 1.3 修改响应式数据
const move = (e) => {
mouse.x = e.pageX
mouse.y = e.pageY
}
// 1.2 等dom渲染完毕。去监听事件
onMounted(()=>{
document.addEventListener('mousemove', move)
})
// 1.4 组件消耗，删除事件
onUnmounted(()=>{
document.removeEventListener('mousemove', move)
})
return mouse
}
export default {
name: 'App',
setup () {
const mouse = useMouse()
// 2. 数字累加
const count = ref(0)
const add = () => {
count.value ++
}
return { ...toRefs(mouse), count, add }
}
}
</script>
<style scoped lang="less"></style>
computed函数
computed函数，是用来定义计算属性的，计算属性不能修改。
计算属性有两种用法：
- 给computed传入函数，返回值就是计算属性的值
- 给computed传入对象，get获取计算属性的值，set监听计算属性改变。
基本用法：
<template>
<div class="container">
<div>今年：{{age}}岁</div>
<div>后年：{{newAge}}岁</div>
</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'App',
setup () {
// 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
// 得到后年的年龄
const newAge = computed(()=>{
// 该函数的返回值就是计算属性的值
return age.value + 2
})
return {age, newAge}
}
}
</script>
高级用法：
<template>
<div class="container">
<div>今年：{{age}}岁</div>
<div>后年：{{newAge}}岁</div>
<!-- 使用v-model绑定计算属性 -->
<input type="text" v-model="newAge">
</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'App',
setup () {
// 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
// 得到后年的年龄
// const newAge = computed(()=>{
// // 该函数的返回值就是计算属性的值
// return age.value + 2
// })
// 计算属性高级用法，传入对象
const newAge = computed({
// get函数，获取计算属性的值
get(){
return age.value + 2
},
// set函数，当你给计算属性设置值的时候触发
set (value) {
age.value = value - 2
}
})
return {age, newAge}
}
}
</script>
让计算属性支持双向数据绑定。
