Vue中的底层原理

最新推荐文章于 2025-07-20 10:50:17 发布
原创 最新推荐文章于 2025-07-20 10:50:17 发布 · 4.7k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #Vue #原理

本文详细解析了数据驱动原理，包括数据模型如何与视图交互、响应式原理及双向数据绑定机制。并通过Vue.js的具体实现，介绍了如何利用getter和setter实现数据劫持及事件的发布订阅模式。

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

  1. 数据驱动
    当数据发生改变时，视图也会进行更新，这叫做数据驱动，也就是数据驱动视图
  2. 深入响应式原理
    数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新
  3. 双向数据绑定原理
    当我们使用 v-model 指令绑定了表单元素时，那么我们可以在视图直接获得数据，当视图发生改变时，数据也会进行更新

综上： 三者都是应用了同一个底层原理，这个底层原理由es5的 Object.defineProperty 属性来提供

  • vue中底层原理的实现主要是依赖 存储器（ getter/setter ）

  • 我们利用了数据劫持和事件的发布订阅来实现双向数据绑定，当我们在vue data选项中定义数据时，vue会通过观察者对象（ observer ）将data选项中的所有key，经过Object.defineProperty 的getter 和setter进行设置，当我们通过 v-model指令绑定元素是， 自动触发getter,getter会返回一个初始值，这样我们在视图中就可以看到数据了，当视图中内容改变时，会触发setter,setter会通知vue，视图已经进行了更新，vue会重新生成 虚拟DOM , 继而通过 新旧 虚拟DOM 对比， 生成patch对象，再将patch对应渲染到视图中

Vue.set/this.$set 的原理（ 数组的下标和length不响应 ）

底层：Object.assign

vue3 底层实现原理
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
05-12 581
无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM，这就是模板的工作原理，也是 Vue.js 渲染页面的流程。
vue3的基本特性和底层原理
2302_76609856的博客
04-26 1958
Vue3的核心创新之一是摒弃了Vue2基于Object.defineProperty的响应式系统，转而采用ES6的Proxy来实现数据代理。Proxy可以直接代理整个对象，无需递归遍历其属性，提供了一种更高效、更全面的数据拦截机制。当对代理对象进行读取、设置、删除、枚举等操作时，Proxy可以透明地触发相应的处理器函数（handler）。在Vue3中，响应式对象通过reactive()函数创建，该函数返回一个由Proxy包装的目标对象。
Vue底层实现原理总结
08-28
小编给大家整理Vue底层实现原理的知识点总结，如果大家对此有需要，可以学习参考下，希望我们整理的内容能够帮助到你。
应届生越来越强，而你就会基础源码么？
web前端开发
05-14 919
Vue3.0 Beta测试版已经出来大半月了，大家都有在新/小项目里试用了吗？以2.0的特点与现下对3.0测试版来说，3.0会默认进行懒观察，会更加有效，也会有更精准的变更通知；操作起来...
Vue 3中reactive、ref、watchEffect和watch的底层原理及核心区别解析
最新发布
警警的博客
07-20 817
例如：操作嵌套表单用 reactive + watch 深度监听；• 依赖收集：执行过程中访问的响应式属性（如 ref.value 或 reactive 属性），自动触发其 track 逻辑，建立依赖关系。• 依赖来源：显式指定监听源（ref、reactive属性、getter函数或数组），内部调用 track 绑定特定属性。• 深度响应：嵌套对象属性访问时，递归调用 reactive 创建子代理，实现全对象树的响应式。• reactive：管理复杂嵌套状态（如表单对象、配置树），避免频繁整体替换。
深入理解vue
热门推荐
如是说的博客
02-24 2万+
一 　理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句...
Vue的底层原理
YY的博客
12-17 2021
Vue的底层原理
【Vue】实现的底层原理
qq_46049113的博客
03-26 1087
在Vue的响应式系统中，数据对象的属性与其依赖之间的关系是通过依赖收集和派发更新机制建立的。通过这种机制，Vue实现了数据属性与依赖之间的自动同步，确保了当数据变化时，依赖于这些数据的界面能够自动更新。当组件在渲染过程中首次读取数据对象的属性时（通过getter），Vue会将当前组件（或更准确地说，当前组件的渲染函数）记为该属性的依赖。通过这种响应式系统和虚拟DOM技术，Vue能够实现数据与UI之间的自动同步，使得开发者能够更专注于数据本身和业务逻辑，而无需手动操作DOM或手动同步数据与UI。
《Vue3 十》Vue 的底层原理
花铛
01-20 416
原生 JavaScript、jQuery 都是命令式编程。目前，Vue、React、Angular、小程序等都是声明式编程。
VUE的底层原理分析vue框架的来龙去脉，和技术要点及难点和应用场景，小白的进阶之道
zhang9880000的博客
06-24 3003
Vue.js 支持自定义指令，允许开发者在普通 DOM 元素上应用自定义行为。自定义指令的生命周期钩子包括bindinsertedupdateunbind。创建自定义指令el.focus();});
axios，feach踩坑系列
CMcmf的博客
04-19 4249
#深入响应式原理： 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新 Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生 改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染 **** 数据必须放在data选项中才能进行深入响应式 底层原理： 核心使用...
Vue底层原理
JNC1999的博客
06-13 994
1、生命周期: Vue最先和最后执行的都是Vue()函数，如果之后Vue()函数元素改变则Vue()函数最终结果也改变 2、v-model可绑定元素: v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 3、Vue元素默认是单向绑定的，如果要双向绑定需要使用v-mode...
Vue应用的底层原理
xuwei1215225的博客
04-19 1133
vue深入响应式原理 讲到Vue的响应式原理，我们可以从它的兼容性说起，Vue不支持IE8以下版本的浏览器，因为Vue是基于 Object.defineProperty 来实现数据响应的，而 Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因；Vue通过Object.defineProperty的...
vue底层原理总结
weixin_53474595的博客
11-01 2659
面试常问vue相关底层总结
关于Vue刷新页面的机制，深入了解响应式原理
Church_T的博客
08-27 2669
现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。 如何追踪变化 当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty...
python底层实现原理_Vue底层实现原理概述
weixin_39610366的博客
11-28 266
前言最近在研究 剖析Vue原理&实现双向绑定MVVM 这篇文章，一边学习一边总结一下自己的思考。Vue是一个典型的MVVM框架，模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观。那么Vue是如何把模型和视图建立起关联的呢？实现原理概述这是前言提到的文章里的代码，一段典型的体现了Vue特点的代码：{{word}}chang...
vue2底层原理
05-13
<think>好的，我现在要帮助用户理解Vue2的底层实现原理，特别是响应式机制和虚拟DOM。首先，我需要回顾用户提供的引用内容，确保涵盖到用户提到的关键点。用户引用了四个资料，涉及Vue的响应式原理、虚拟DOM、模板编译和组件化，以及具体的源码分析。用户的问题集中在Vue2的底层实现，包括源码分析、响应式机制和虚拟DOM。 首先，我需要整理响应式原理。根据引用2和3，Vue的响应式是通过数据劫持结合发布-订阅模式实现的。核心是Observer类，它会遍历数据对象的属性，使用Object.defineProperty将其转换为getter和setter。在getter中收集依赖（Watcher），在setter中通知变化，触发更新。需要提到Dep和Watcher的关系，Dep负责管理依赖，Watcher作为观察者，当数据变化时执行回调。 接下来是虚拟DOM部分，引用1和2提到Vue使用虚拟DOM来提高渲染效率。虚拟DOM是对真实DOM的抽象表示，通过diff算法比较新旧虚拟DOM的差异，最小化DOM操作。需要解释为什么使用虚拟DOM，比如直接操作DOM成本高，而虚拟DOM可以批量更新，优化性能。 用户可能还想了解Vue的初始化过程，比如new Vue()时发生了什么。根据引用2，Vue初始化实例成员和静态成员，调用_init方法，处理数据响应式，编译模板生成render函数，挂载组件，最后通过patch方法将虚拟DOM转化为真实DOM。 另外，用户提到的$watch方法（引用3和4）涉及Watcher的类型，包括渲染Watcher、计算属性和侦听器。需要说明这三种Watcher的区别，以及deep和immediate选项的作用。 需要注意用户可能存在的疑问点，比如数组的响应式处理，Vue2是如何通过覆盖数组方法实现的。还有Dep.target的作用，依赖收集的过程，以及异步更新队列（nextTick）的实现机制。 最后，确保回答结构清晰，分点说明，结合源码中的关键类和方法，如Observer、Dep、Watcher、patch等。同时，生成的相关问题要覆盖用户可能进一步想了解的内容，如数组响应式限制、与Vue3的区别、nextTick原理等。</think>#### 深入解析Vue2底层实现原理 --- ### 一、响应式机制核心实现 Vue2的响应式系统基于**数据劫持 + 发布-订阅模式**实现，核心流程如下： 1. **数据劫持阶段** - 通过`Observer`类递归遍历对象属性，使用`Object.defineProperty`将属性转换为getter/setter ```javascript // 源码截取（src/core/observer/index.js） class Observer { constructor(value) { this.dep = new Dep() def(value, '__ob__', this) if (Array.isArray(value)) { this.observeArray(value) // 对数组特殊处理 } else { this.walk(value) // 遍历对象属性 } } } ``` 2. **依赖收集与触发** - 在getter中通过`Dep.target`收集当前`Watcher`（依赖）到`Dep`订阅器 - 在setter中通知`Dep`触发所有`Watcher`更新 ```javascript function defineReactive(obj, key, val) { const dep = new Dep() Object.defineProperty(obj, key, { get() { if (Dep.target) { dep.depend() // 收集依赖 } return val }, set(newVal) { if (newVal === val) return val = newVal dep.notify() // 触发更新 } }) } ``` 3. **Watcher的三重身份** - **渲染Watcher**：负责组件视图更新 - **计算属性Watcher**：缓存计算结果 - **用户自定义Watcher**：通过`vm.$watch`创建 ```javascript // 源码中的Watcher类（src/core/observer/watcher.js） class Watcher { constructor(vm, expOrFn, cb, options) { this.vm = vm this.getter = parsePath(expOrFn) // 解析表达式或函数 this.value = this.get() // 触发依赖收集 } get() { Dep.target = this const value = this.getter.call(this.vm, this.vm) Dep.target = null return value } update() { queueWatcher(this) // 进入异步更新队列 } } ``` --- ### 二、虚拟DOM与Diff算法 #### 1. 为什么需要虚拟DOM？ - **性能优化**：直接操作DOM成本高，虚拟DOM通过JS对象抽象描述，批量更新减少重排次数 - **跨平台能力**：虚拟DOM可适配不同渲染目标（Web/Weex/小程序）[^1] #### 2. 实现流程 1. **`render`函数生成VNode** ```javascript // 编译后的render函数示例 function render() { return _c('div', { attrs: { id: 'app' } }, [ _c('p', [_v(_s(msg))]) ]) } ``` 2. **Diff算法核心逻辑** - **同级比较**：通过`sameVnode`判断节点是否可复用 - **Key的作用**：帮助识别列表元素移动/新增/删除 ```javascript // 源码中的patch函数（src/core/vdom/patch.js） function patch(oldVnode, vnode) { if (!sameVnode(oldVnode, vnode)) { // 替换节点 } else { // 更新属性 patchVnode(oldVnode, vnode) } } ``` --- ### 三、关键源码模块联动 1. **初始化流程** ```mermaid graph TD A[new Vue()] --> B[this._init()] B --> C{是否有el选项?} C -->|是| D[调用$mount()] C -->|否| E[需手动调用$mount()] D --> F[编译template为render函数] F --> G[创建渲染Watcher] G --> H[首次执行updateComponent] ``` 2. **数据变更触发更新** ```mermaid graph LR A[数据修改] --> B[setter触发dep.notify()] B --> C[所有Watcher进入队列] C --> D[nextTick后执行队列] D --> E[执行Watcher.run()] E --> F[重新渲染生成新VNode] F --> G[patch新旧VNode差异] G --> H[最小化DOM操作] ``` --- ### 四、设计亮点与局限性 1. **亮点设计** - **异步更新队列**：通过`nextTick`合并多次数据变更的渲染操作 - **数组方法劫持**：重写`push/pop/shift/unshift/splice/sort/reverse`方法触发更新[^3] 2. **已知局限性** - **对象属性新增/删除无法检测**：需用`Vue.set/delete` - **数组索引直接赋值无效**：`arr[0] = newVal`不会触发视图更新 --- #### 相关问题 1. Vue2如何检测数组变化？为何直接修改数组长度无效？ 2. Vue2与Vue3响应式实现的核心区别是什么？ 3. `nextTick`是如何实现异步批处理的？ 4. 虚拟DOM Diff算法的时间复杂度是多少？为什么？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值