Vue.js响应式数据原理详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_48727085/article/details/121792118

本文探讨Vue.js中响应式数据的实现，包括当对象或其属性变化时如何监听并执行相应操作，如更新视图。核心原理是通过Object.defineProperty将对象转为响应式，利用getter和setter触发观察者watcher记录依赖，并在数据变化时更新虚拟DOM，通过diff算法更新实际DOM。

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

响应式数据目的：

当对象本身（如增加属性，删除属性）或对象属性（如修改属性值）发生变化时，能够监听的到，进而执行一些函数。最常见的就是render函数

在这里插入图片描述

响应式数据的简单原理：

先用Object.defindproperty将普通对象变成响应式对象。render函数中会使用到一些数据（如h(“h1”, this.age（读取对象属性）)）,触发getter函数，此时该函数会通知watcher观察者记录依赖（某个render函数使用该数据），当数据发生变化时，触发setter函数，此时该函数也会通知watcher，观察者就会去查询该属性依赖的render函数，然后执行该render函数生成新的虚拟dom树，之后通过diff算法对比新旧两棵树，进而修改真实dom树的某一处

响应式数据的复杂原理：

在vue生命周期beforeCreate与created之间，用Observer构造器（vue内部自带，内部使用Object.defindproperty）将普通对象变成响应式对象。render函数中会使用到一些数据（如h(“h1”, this.age（读取对象属性）)）,触发getter函数，此时该函数会通知watcher观察者记录依赖（某个render函数使用该数据），当数据发生变化时，触发setter函数，此时该函数也会通知watcher，观察者就会去查询该属性依赖的render函数，然后执行该render函数生成新的虚拟dom树，之后通过diff算法对比新旧两棵树，进而修改真实dom树的某一处

响应式数据Data：

		通过Object.defindproperty遍历对象的每一个属性，修改属性内部将其变成gettter和setter函数，
		当读取属性的时候，触发getter函数，修改属性时，触发setter函数

配置对象中的render函数

		vue-cli构建工具打包的时候，用编译器将组件模板编译成render函数，	
		所以打包结果里面没有模板，不需要也没有vue编译系统代码，减小打包体积，提高运行效率，不用再去编译

虚拟dom树

		本质就是一个对象，对象的增啥改查相对于真实dom更加节省效率

Watcher

		观察者，能够记录某属性和某render函数之间的依赖

Observer

		在vue生命周期beforeCreate与created之间，用Observer构造器（vue内部自带，内部使用Object.defindproperty）将普通对象变成响应式对象。
		但是对象本身（如增加属性，删除属性）发生变化，是监听不到的（因为VUE2依靠ES5标准），为了监听到

证明Observer将普通对象变成响应式对象（该构造器只能vue内部使用，所以间接使用Vue.observable方法作为替代）

在这里插入图片描述

此时对象属性发生变化时，可以被检测到