前端底层知识体系构建，太完整了

1.Vue 知识体系

---

1.1 基础原理

1.1.1 Vnode

❝

Vnode也称虚拟node节点,是对真实元素的抽象。诞生的背景是因为前端在很长一段时间通过直接操作Dom来达到修改视图，随着项目庞大，维护就变成一个问题。那换个角度想如果把真实Dom树抽象成为一棵以JS语法构建的抽象，然后通过修改抽象树的结构来转换成真实的Dom来重新渲染到视图。

❞

• 如何生成虚拟节点？：createElement()深入实践学习的，可阅读树酱之前写的 从0到1开发动态表单[1]

• Vnode如何检测变化并更新视图呢？diff算法

??? 拓展阅读：

• 关于渲染函数render[2]

• VNode节点及Vuejs中VNode类的定义[3]

• [ Vue实现的diff原理]( ).MarkDown)

1.1.2 nextTick

❝

nextTick目的是将回调函数的调用延迟到下一次dom更新数据后，换句话说就是修改数据后并不会立即更新dom ，因为dom的更新是异步的，无法通过同步代码获取，需要使用nextTick，在下一次事件循环中获取（Vue中Dom的更新是异步的）

❞

this.msg = “Hello world.”

✅ this.$nextTick(() => {

this.msg2 = this.$refs.msgDiv.innerHTML

})

??? this.msg3 = this.$refs.msgDiv.innerHTML

???拓展阅读：

• Vue.js异步更新DOM策略及nextTick[4]

• 你真的理解 $nextTick么[5]

1.1.3 MVVM

❝

MVVM全称为：Model-View-View-Model，诞生背景是在传统的MVC架构中，缺少一个数据解析的角色，而M、V、C等都不应该处理数据解析，于是专门为数据解析的就诞生了一个新的类：ViewModel，主要用于将Model和View关联起来，数据变化更新视图，视图变化更新数据

❞

???拓展阅读：

• 廖雪峰：MVVM是什么？[6]

• 50行代码的MVVM，感受闭包的艺术[7]

1.1.4 双向绑定原理

❝

上一节提到mvvm,本质上就是vue数据双向绑定，它是通过数据劫持结合设计模式中的发布者-订阅者模式，主要包括以下步骤

❞

• 1.将数据data变成可观察：通过 Object.defineProperty()设置属性的setter和getter来监听数据的变化，通过getter进行依赖收集，而每个