知识点总结---Vue.js

Vue 原理

MVVM模型

简介

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

MVVM 应用于 Vue

• Model: 指的是定义的各种数据，如对象，数组等等
• View: 指的是页面视图
• ViewModel: 指的是 vue 实例化对象

---

原理解析

原理图

数据劫持和发布订阅模式

• Vue 通过三个核心类来实现数据劫持和发布订阅模式以及 Compile 类来解析模板指令。

  • Observer：用来劫持并监听所有属性，如果有变动的，就通知订阅者。

    Observer 的核心是通过 Obeject.defineProperty() + 递归的方法来给每个数据添加 setter 和 getter 以达到监听数据的变动的功能。每当数据发生变化，就会触发 setter。这时候 Observer 就会通过 Dep.notify（）去通知订阅者去更新视图。

  • Dep：Observer 与 Watcher 的中转站，对依赖进行收集并通知变化。

    该类定义一个 subs 数组存放 watcher，也就是进行依赖收集。每当 Observer 监听到数据变化，Dep 就会通过 notify() 通知 subs 中存放的 watcher 进行 update() 操作来更新。

  • Watcher：可以收到属性的变化通知并执行相应的函数，从而更新视图。

    Watcher 实例化必须有一个 update() 方法，待属性变动，Dep 实例通过 notif() 通知时，watcher 能调用自身的 update() 方法去触发 Compile 中绑定的回调，从而实现视图更新。

  • Compile：解析模板指令，添加监听数据的订阅者。

    Compile 主要是用于解析模板指令，将模板中的变量替换成数据，初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。