【Vue】实现的底层原理

轩轩Aminent

已于 2024-03-27 08:16:33 修改

阅读量816

点赞数 9

文章标签： vue.js javascript 前端

于 2024-03-26 22:41:27 首次发布

本文链接：https://blog.csdn.net/qq_46049113/article/details/137059635

版权

本文详细解析了Vue如何通过数据劫持、getter和setter、依赖收集以及虚拟DOM实现数据与UI的自动同步，展示了响应式系统在组件中的工作原理和作用域管理。

摘要由CSDN通过智能技术生成

底层原理

在 Vue 中实现数据对象和UI模板之间绑定关系，从而实现数据变化自动更新UI的核心机制，主要依赖于响应式系统。Vue的响应式系统基于JavaScript的对象属性访问器（getter和setter）和依赖收集的概念来实现。下面是这一机制的大致原理：

数据劫持（Data Hijacking）
Vue通过使用Object.defineProperty函数对组件的数据对象进行处理，为数据对象的每个属性设置getter和setter。这一过程通常在Vue实例初始化时完成。
- Getter用于依赖收集：当组件的模板或计算属性访问某个数据属性时，getter函数会被触发，此时Vue会记录当前组件为该属性的依赖。
- Setter用于派发更新：当数据属性发生变化时（即赋值操作），setter函数会被触发，Vue将通知所有依赖于该属性的组件进行更新。
依赖收集（Dependency Collection）
当组件在渲染过程中首次读取数据对象的属性时（通过getter），Vue会将当前组件（或更准确地说，当前组件的渲染函数）记为该属性的依赖。这意味着，如果该数据属性发生变化，Vue知道需要重新渲染哪些组件。
- 每个组件实例都有一个对应的观察者实例（Watcher），负责将组件和数据属性关联起来。
- 当数据属性被读取时，观察者实例会被添加到该属性的依赖列表中。
派发更新（Dispatching Updates）
当数据属性发生变化时（通过setter），Vue会遍历该属性的依赖列表，通知每个依赖（即Watcher实例）更新自己。在组件层面，这通常意味着重新执行组件的渲染函数，生成新的虚拟DOM，并高效地将变化应用到真实DOM上。
虚拟DOM和高效更新
- Vue使用 ** 虚拟 DOM（Virtual DOM）**来进一步提高性能。当数据变化引起组件重新渲染时，Vue首先生成新的虚拟DOM树，然后与旧的虚拟DOM树进行比较（diff算法），计算出需要在真实DOM上做的最小更改集。
- 只有实际需要变更的DOM元素会被更新，这大大减少了直接操作DOM的开销，提高了应用的性能和响应速度。

通过这种响应式系统和虚拟DOM技术，Vue能够实现数据与UI之间的自动同步，使得开发者能够更专注于数据本身和业务逻辑，而无需手动操作DOM或手动同步数据与UI。

数据对象的属性及属性的依赖

在Vue的响应式系统中，数据对象的属性与其依赖之间的关系是通过依赖收集和派发更新机制建立的。这里的"依赖"通常指的是依赖于这个数据属性的Vue组件实例中的Watcher对象。每个组件实例都有一个或多个Watcher对象，这些Watcher对象负责将组件的渲染函数与组件所用到的数据属性连接起来。当数据属性变化时，这些Watcher对象会被通知，进而引起组件的重新渲染。

实例解释：
假设有一个简单的Vue组件，它包含一个文本输入框，用于显示和更新用户的名字：

<template>
  <div>
    <p>Hello, {{ name }}!</p>
    <input v-model="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '小白'
    };
  }
}
</script>

在这个组件中，name 是组件的一个数据属性。

依赖收集：当这个组件首次渲染时，Vue 会执行组件的渲染函数。在执行过程中，渲染函数会访问 name 属性（来显示用户名），这时会触发 name 属性的 getter 函数。Vue 会识别出这个渲染函数（或者说对应的 Watcher 对象）依赖于 name 属性，并将这个 Watcher 对象加入到 name 属性的依赖列表中。
派发更新：当用户在文本框中输入新的名字时，v-model 指令会更新 name 属性的值，这会触发 name 属性的 setter 函数。因为name属性的值发生了变化，Vue 会遍历 name 属性的依赖列表，也就是通知所有依赖于 name 属性的 Watcher 对象。在这个例子中，就是通知这个组件的 Watcher 对象，告诉它 name 属性已经变化了。
组件重新渲染：Watcher 对象接到变化通知后，会重新执行组件的渲染函数，这次渲染会使用新的 name 值。因此，界面上显示的名字也会更新为用户输入的新名字。

通过这种机制，Vue 实现了数据属性与依赖之间的自动同步，确保了当数据变化时，依赖于这些数据的界面能够自动更新。这大大简化了开发过程，使开发者能够专注于数据逻辑，而不必手动操作 DOM 或编写额外的代码来处理数据和视图之间的同步。

作用域

在 Vue 组件中，name 这样定义在组件的 data 函数返回对象中的属性，它的作用域是局部的，仅限于该Vue组件实例。这意味着，name 属性可以在该组件的模板、计算属性、方法、监视器等内部被直接访问和使用，但在组件外部是无法直接访问到的。

具体来说：

模板访问：在组件的模板(<template>)内，可以直接使用{{ name }}来绑定数据，显示其值，或者在模板内的指令中使用，如 v-model="name" 进行数据双向绑定。
方法、计算属性、监视器访问：在组件的方法、计算属性、监视器（定义在 <script> 部分的 methods、computed、watch等）中，可以通过 this.name 来访问和修改 name 属性的值。
子组件访问：如果想在子组件中使用父组件的 name 属性，需要通过属性（props）传递、事件派发、插槽或者 Vuex 等状态管理库来实现。直接在子组件内部通过 this.name 是无法访问父组件的 name 属性的。
外部访问：在组件外部，比如其他兄弟组件或父级组件，不能直接通过 this.name 访问这个组件的 name 属性。需要通过事件、插槽、Vuex 或者提供外部访问的方法（如通过 ref 引用组件实例）等机制来获取或修改name值。

通过这种方式，Vue 组件确保了内部数据的封装性和独立性，有利于提高代码的可维护性和重用性。这也是组件化开发模式的一大优势，能够让开发者更加灵活和高效地构建大型应用。