vue3组合API-toRefs函数

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

09-组合API-toRefs函数

掌握：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式

大致步骤：

• 使用 reactive 创建响应式数据，踩坑
• 使用 toRefs 处理响应式数据，爬坑
• toRefs 函数的作用，与使用场景

<template><div><p>姓名：{{ name }}</p><p>年龄：{{ age }}</p><button @click="age++">一年又一年</button></div>
</template><script>
// 1. 导入函数
import { reactive, toRefs } from 'vue'
export default {name: 'App',setup() {// 2. 创建响应式数据对象const state = reactive({ name: '张三疯', age: 18 })// 3. 返回数据return { ...toRefs(state) }}
}
</script>

• toRefs 函数的作用，与使用场景

  • 作用：把对象中的每一个属性做一次包装成为响应式数据
  • 响应式数据展开的时候使用，解构响应式数据的时候使用

总结：

• 当去解构和展开 reactive 的响应式数据对象使用 toRefs 保持响应式