【愚公系列】《循序渐进Vue.js 3.x前端开发实践》033-响应式编程的原理及在Vue中的应用

news2025/1/30 15:12:23

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
🚀一、响应式编程的原理及在Vue中的应用
- 🔎1.HTML 结构分析
- 🔎2.数据对象
- 🔎3.定义触发器
- 🔎4.定义代理的处理器
- 🔎5.创建代理对象
- 🔎6.计算和更新逻辑
- 🔎7.首次触发计算并输出结果
- 🔎8.修改数据并再次触发计算
- 🔎9.总结

🚀前言

在当今的前端开发中，响应式编程已成为一种重要的编程范式，尤其是在构建动态用户界面时。它允许开发者以更加直观和高效的方式处理数据变化，从而自动更新视图，提升用户体验。Vue.js 作为一款流行的渐进式框架，深入地将响应式编程的理念融入到其核心设计中，使得构建交互丰富的应用变得更加简单和优雅。

本篇文章将全面探讨响应式编程的原理，帮助你理解其背后的机制和概念。我们将分析 Vue.js 是如何实现响应式数据绑定的，包括其使用的观察者模式和依赖收集机制。同时，我们还将深入讨论在 Vue 中如何有效利用响应式特性来提升开发效率与代码的可维护性。

🚀一、响应式编程的原理及在Vue中的应用

🔎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>
    <!-- <script>
        let a = 1;
        let b = 2;
        let sum = a + b;
        console.log(sum);
        a = 3;
        b = 4;
        console.log(sum);
    </script> -->
    <script>
        ...
    </script>
</body>
</html>

该页面没有直接内容显示，只是通过 <script> 标签执行 JavaScript 代码，模拟响应性变量的效果。
Vue 库并未在该段代码中被使用，主要的实现逻辑是通过原生 JavaScript 的 Proxy 来模拟。

🔎2.数据对象

let a = {
    value: 1
};
let b = {
    value: 2
};

创建了两个数据对象 a 和 b，每个对象都有一个 value 属性，初始值分别为 1 和 2。

🔎3.定义触发器

let trigger = null;

trigger 是一个函数，它用于在数据变化时更新计算的结果。开始时设置为 null，后续会指向一个具体的函数，来触发对数据变化后的更新操作。

🔎4.定义代理的处理器

handleA = {
    set(target, key, value) {
        target[key] = value;
        if (trigger) {
            trigger();
        }
    }
};
handleB = {
    set(target, key, value) {
        target[key] = value;
        if (trigger) {
            trigger();
        }
    }
};

handleA 和 handleB 都是处理对象 a 和 b 的代理处理器。set 方法是 Proxy 对象的捕捉器（trap），它会在你尝试设置对象的属性值时被触发。
每次属性值被更改时，set 方法会被调用并更新对象的值，同时通过 trigger() 来触发某些操作。也就是当 a.value 或 b.value 被修改时，trigger 会执行更新操作。

🔎5.创建代理对象

let pa = new Proxy(a, handleA);
let pb = new Proxy(b, handleB);

使用 new Proxy(target, handler) 创建了 pa 和 pb，这两个是原始对象 a 和 b 的代理对象。
当访问或修改 pa 或 pb 上的属性时，代理对象会使用相应的 handler 进行拦截，从而执行 set 方法。

🔎6.计算和更新逻辑

let sum = 0;
trigger = () => {
    sum = pa.value + pb.value;
};

初始化一个 sum 变量。
将 trigger 函数指向一个函数，trigger 会更新 sum 的值，sum 是 pa.value + pb.value 的和。
通过 trigger() 来进行初次的计算，使 sum 等于 1 + 2 = 3（即 pa.value 和 pb.value 的初始和）。

🔎7.首次触发计算并输出结果

trigger();
console.log(sum);

调用 trigger() 进行首次计算，sum 被更新为 3。
输出 sum，会打印 3。

🔎8.修改数据并再次触发计算

pa.value = 3;
pb.value = 4;
console.log(sum);

修改代理对象 pa 和 pb 上的 value 属性，分别设置为 3 和 4。
由于在 set 方法中有 trigger()，每当 pa.value 或 pb.value 改变时，trigger() 被触发，导致 sum 被重新计算为 3 + 4 = 7。
最后，输出 sum，会打印 7。