【愚公系列】《循序渐进Vue.js 3.x前端开发实践》034-响应式对象和状态管理
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代 JavaScript 开发中，响应式编程已经成为提升用户体验和构建动态应用的关键技术之一。特别是在 Vue.js 这样的框架中，响应式对象是实现数据与视图同步的核心机制。通过响应式对象，开发者可以轻松地管理状态变化，并确保用户界面在数据更新时自动反应，从而提升了开发效率和代码的可维护性。
本篇文章将深入探讨响应式对象的概念及其在 Vue.js 中的实现原理。我们将分析 Vue 是如何通过代理（Proxy）和观察者模式来实现响应式数据的，了解其背后的工作机制，以及在实际开发中如何有效利用这一特性。你将看到响应式对象如何简化数据管理，增强应用的交互性和灵活性。
🚀一、响应式对象和状态管理
🔎1. HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应性对象</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style> </style>
</head>
<body>
<div id="Application"> </div>
<script> ... </script>
</body>
</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：这行代码引入了 Vue 3 的 CDN 链接，以便在浏览器中直接使用 Vue 的功能。<div id="Application">：这是 Vue 应用的挂载目标，Vue 会把其组件内容渲染到这个div元素中。
🔎2. Vue 应用创建与挂载
const App = Vue.createApp({
setup() {
...
},
template: `
<h1>测试数据：{{value}}</h1>
<button @click="click">点击</button>
`
})
App.mount("#Application")
Vue.createApp({})：创建一个 Vue 应用实例，并将组件定义在setup函数中。App.mount("#Application")：将创建的 Vue 应用挂载到 HTML 中id="Application"的div元素上。Vue 会将组件渲染到这个元素内。
🔎3. setup 函数中的逻辑
setup() {
let myObject = Vue.reactive({
value: 0
})
let { value } = Vue.toRefs(myObject)
function click() {
value.value += 1
console.log(value.value)
}
return { value, click }
}
-
Vue.reactive({ value: 0 })：Vue.reactive是 Vue 3 提供的 API，用来将一个对象变为响应式对象。它使得对象中的属性变得响应式，能够自动跟踪依赖，并在数据变化时触发视图更新。- 在这个例子中，
myObject是一个具有value属性的响应式对象，初始值为0。
-
let { value } = Vue.toRefs(myObject)：Vue.toRefs用来将响应式对象中的属性转换成响应式的引用（ref）。myObject本身是响应式的，但是在setup函数中，Vue 会将其解构成一个普通的对象，而toRefs会确保其中的每个属性（在这里是value）仍然保持响应式。- 通过
toRefs解构后，value是一个ref对象，它具有.value属性来存储实际的值。
-
function click()：- 定义了一个
click函数，绑定到按钮的点击事件上。 - 每次点击按钮时，
click函数会执行，value.value会自增 1，表示每次点击按钮时，value会增加 1。 console.log(value.value)会输出当前value的值，帮助我们查看点击后的变化。
- 定义了一个
-
return { value, click }：setup函数的返回值会暴露给模板。在这里，value（响应式数据）和click（方法）都被返回，并能在模板中访问。
🔎4. 模板部分
<h1>测试数据：{{value}}</h1>
<button @click="click">点击</button>
-
<h1>测试数据：{{value}}</h1>：- 这里的
{{value}}是 Vue 的模板语法，表示动态插入value的值。由于value是响应式的，每当value的值变化时，视图会自动更新。
- 这里的
-
<button @click="click">点击</button>：- 按钮绑定了
@click="click"事件监听，点击时会触发click方法，进而更新value的值。
- 按钮绑定了
🔎5. 代码逻辑总结
🦋5.1 响应式对象与 toRefs：
myObject是响应式的：通过Vue.reactive将myObject转化为响应式对象。任何访问或修改myObject的属性时，Vue 会自动追踪这些变化，并在相应的数据变化时更新视图。value是ref对象：Vue.toRefs(myObject)将myObject中的每个属性转换为ref，以便保持响应式。这样做的好处是，你可以在setup中直接解构响应式对象，而不破坏其响应性。
🦋5.2 事件与数据更新：
click函数：每次点击按钮时，click函数会执行，修改value的值（通过value.value += 1）。value的值会自动更新，Vue 会检测到这一变化并更新视图中的显示值。
🦋5.3 Vue 的响应式系统：
- 在 Vue 3 中，响应式系统 会通过
Proxy来自动跟踪数据的变化。当数据发生变化时，相关的视图部分会被自动重新渲染，减少了开发者手动管理 DOM 更新的复杂度。 - 在这个示例中，
value是一个响应式引用，当value更新时，HTML 中显示的{{value}}会自动更新为新的值，展示了 Vue 的响应式特性。
🔎6. 总结
这段代码展示了如何使用 Vue 3 中的响应式数据 (reactive) 和引用 (ref) 来管理应用状态。通过 toRefs，你可以将响应式对象的属性暴露为引用，并保持其响应式特性。每次点击按钮时，value 会增加，Vue 会自动更新视图，展示新的值。
Vue.reactive用于创建响应式对象。Vue.toRefs用于将响应式对象的属性解构成响应式引用，方便在setup函数中使用。- 模板语法 (
{{ value }}) 用于动态渲染数据，并且响应式数据变化时，视图会自动更新。
这个示例展示了 Vue 3 中响应式系统的核心思想，如何轻松地管理应用状态，并通过简单的模板语法和事件绑定进行数据和视图的同步更新。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）