VUE3 原理速成指南：用几集下饭剧时间搞懂 VUE3 的运行机制

2023-09-29 19:14:59

VUE3 原理速成指南

大家好，我是卡颂。最近中午没胃口，找来 VUE 源码相关视频来当下饭剧。几顿饭下去，人胖了，VUE 也整明白了。这篇文章为你带来一份 VUE3 原理速成指南。

模块划分

如果我们用 VUE 的模版语法定义：

<template>
  <div id="app">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

那么这个 VUE 组件的模块划分就非常清晰了：

template 模块定义了组件的模板，也就是组件的 HTML 结构。
script 模块定义了组件的逻辑，包括数据、方法和生命周期钩子等。

MVVM 架构

VUE 采用 MVVM（Model-View-ViewModel）架构，其中：

Model 是应用程序的数据模型，也就是数据本身。
View 是应用程序的视图，也就是用户看到的部分。
ViewModel 是连接 Model 和 View 的桥梁，负责数据的双向绑定和更新。

响应式系统

VUE 的响应式系统是其核心之一，它可以自动追踪数据变化，并在数据变化时自动更新视图。响应式系统主要通过以下几个机制来实现：

数据劫持 ：VUE 会劫持数据对象的属性，并在属性值发生变化时触发相应的更新操作。
发布-订阅模式 ：VUE 使用发布-订阅模式来管理数据变化的监听者。当数据变化时，VUE 会向所有监听者发送通知，监听者收到通知后会更新自己的状态。
虚拟 DOM ：VUE 使用虚拟 DOM 来优化视图更新。当数据变化时，VUE 会先在内存中创建一个虚拟 DOM，然后将虚拟 DOM 与真实 DOM 进行比较，只更新发生变化的部分。