Vue2.x、Vue3.x的数据响应式核心原理_vue3.x响应式数据原理是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43334673/article/details/116228079

本文介绍了Vue2.x和Vue3.x数据响应式的核心原理，包括数据劫持、发布/订阅模式和观察者模式。在Vue2.x中，数据响应性通过Object.defineProperty实现，而在Vue3.x中，使用Proxy简化了这一过程。文章还通过实例解释了发布/订阅模式在Vue中的应用，如子组件与父组件、兄弟组件间的通信，并封装了一个简易的发布/订阅类。同时，讨论了观察者模式在Vue组件渲染和更新中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.概念

在学习核心原理前，我们先了解两个概念：

数据响应式：数据模型仅仅是普通的JS对象，而我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。(内部操作DOM，我们只是修改数据)
双向数据绑定：数据改变，视图也改变；视图改变，数据也改变。在表单上使用v-model创建双向数据绑定。

2.Vue2.x数据响应式核心原理

在官方文档有这么一段话：

当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是内部它们让Vue能够追踪依赖，在属性被访问和修改时通知变更。

即Vue2.x的数据响应式是通过Object.defineProperty对数据进行劫持，再结合观察者模式实现的。现在我们先来学习数据劫持，观察者模式稍后学习。

实例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据响应式原理</title>
</head>
<body>
    <div id="app">
        Hello Vue
    </div>
    <script>
        //模拟Vue实例中的data选项
        let data={
    
            msg:'Hello Vue'
        }

        //模拟Vue的实例
        let vm={
    };

        //数据劫持，当访问或者设置vm中的成员的时候，做一些干预操作
        Object.defineProperty(vm,'msg',{
    
            //可枚举(即可被遍历)
            enumerable:true,
            //可配置(可以使用delete删除，可以通过defineProperty重新定义)
            configurable:true,

            //当获取值时执行
            get(){
    
                console.log('getter:',data.msg);
                return data.msg;
            },
            //当设置、更新msg变量时执行
            set(newValue){
    
                console.log("setter:",newValue);
                if(data.msg===newValue){
    
                    return;//前后数据相同，则不用做操作DOM的多余操作
                }
                data.msg=newValue;
                document.querySelector("#app").textContent=newValue;
            }
        })

        //测试setter
        vm.msg="Hello 响应式原理";

        //测试getter
        console.log(vm.msg);
    </script>
</body>
</html>

在这里插入图片描述
上面实例只是对msg这个属性实现了响应式，那Vue中data选项有多个属性，怎么做到让它们都成为响应式呢？

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据响应式原理</title>
</head>