在最开始的章节提到过,我们在使用 vue-cli
创建项目的时候,提供了两个版本供我们使用, Runtime Only
版本和 Runtime + Compiler
版本。Runtime Only
版本是不包含编译器的,在项目打包的时候会把模板编译成 render
函数,也叫预编译。Runtime + Compiler
版本包含编译器,可以把编译过程放在运行时做。
......
Vue 的 _update
是实例上的一个私有方法,主要的作用就是把 VNode 渲染成真实的 DOM ,它在首次渲染和数据更新的时候被调用。在数据更新的时候会发生新 VNode 和 旧 VNode 对比,获取差异更新视图,我们常说的 diff
就是发生在此过程中。
......
Vue 2.0 相比 Vue 1.0 最大的升级就是利用了虚拟DOM。 在 Vue 1.0 中视图的更新是纯响应式的。在进行响应式初始化的时候,一个响应式数据 key
会创建一个对应的 dep
,这个 key
在模板中被引用几次就会创建几个 watcher
。也就是一个 key
对应一个 dep
,dep
内管理一个或者多个 watcher
。由于 watcher
和 DOM
是一对一的关系,更新时,可以明确的对某个 DOM
进行更新,更新效率还是很高的。
......
之前介绍过初始化时 Vue 对数据的响应式处理是利用了Object.defifineProperty()
,通过定义对象属性 getter
方法拦截对象属性的访问,进行依赖的收集,依赖收集的作用就是在数据变更的时候能通知到相关依赖进行更新。
......
Vue 一大特点就是数据响应式,数据的变化会作用于视图而不用进行 DOM 操作。原理上来讲,是利用了 Object.defifineProperty()
,通过定义对象属性 setter
方法拦截对象属性的变更,从而将属性值的变化转换为视图的变化。
......
我们在使用 Vue 的时候,首页就是先 new Vue(...)
;在上一章中通过分析构建流程,我们得出入口文件 src/platforms/web/entry-runtime-with-compiler.js
,通过入口文件,我们一步一步找到 Vue 构造函数定义所在:
......
Vue3 出来也有好一整子了,但 Vue2 的源码原理学习,不论在升职加薪还是在另谋高就的路上,一直是一个必要的环节,正应了“面试造火箭,上班拧螺丝”这句话。尽管之前对 Vue2 的源码也有学习过,但是一直没有进行一个系统的总结,说白了就是懒。最近在掘金上看到 李永宁 大佬的 《Vue 源码解读》 系列文章后,又开始蠢蠢欲动了。这次主要是对核心实现的一个梳理,细节方面不会太过介绍。
......
MVVM 设计模式,是由 MVC、MVP 等设计模式进化而来,M - 数据模型(Model),VM - 视图模型(ViewModel),V - 视图层(View)。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。如下图所示:
......
SPA(single page application) :单页面应用程序,只有一个完整的页面,加载时,不会加载整个页面。当路由发生变化时,监听路由的变化,不会请求页面,而是只更新视图。路由描述的是 URL 与 UI 之间的映射关系,即 URL 变化引起 UI 更新(无需刷新页面),在 Vue 生态种提供了 VueRouter ,来实现单页面前端路由。VueRouter 常用的模式有两种:Hash模式 和 History模式。
......