Vue(v2.6.14)源码解毒(七):模板编译

04
09月
2021
Vue(v2.6.14)源码解毒(七):模板编译

在最开始的章节提到过,我们在使用 vue-cli 创建项目的时候,提供了两个版本供我们使用, Runtime Only 版本和 Runtime + Compiler 版本。Runtime Only 版本是不包含编译器的,在项目打包的时候会把模板编译成 render 函数,也叫预编译。Runtime + Compiler 版本包含编译器,可以把编译过程放在运行时做。
......

Vue(v2.6.14)源码解毒(六):update和patch

31
08月
2021
Vue(v2.6.14)源码解毒(六):update和patch

Vue 的 _update 是实例上的一个私有方法,主要的作用就是把 VNode 渲染成真实的 DOM ,它在首次渲染和数据更新的时候被调用。在数据更新的时候会发生新 VNode 和 旧 VNode 对比,获取差异更新视图,我们常说的 diff 就是发生在此过程中。
......

Vue(v2.6.14)源码解毒(五):render和VNode

27
08月
2021
Vue(v2.6.14)源码解毒(五):render和VNode

Vue 2.0 相比 Vue 1.0 最大的升级就是利用了虚拟DOM。 在 Vue 1.0 中视图的更新是纯响应式的。在进行响应式初始化的时候,一个响应式数据 key 会创建一个对应的 dep,这个 key 在模板中被引用几次就会创建几个 watcher。也就是一个 key 对应一个 depdep 内管理一个或者多个 watcher。由于 watcherDOM 是一对一的关系,更新时,可以明确的对某个 DOM 进行更新,更新效率还是很高的。
......

Vue(v2.6.14)源码解毒(四):更新策略

23
08月
2021
Vue(v2.6.14)源码解毒(四):更新策略

之前介绍过初始化时 Vue 对数据的响应式处理是利用了Object.defifineProperty(),通过定义对象属性 getter 方法拦截对象属性的访问,进行依赖的收集,依赖收集的作用就是在数据变更的时候能通知到相关依赖进行更新。
......

Vue(v2.6.14)源码解毒(三):响应式原理

20
08月
2021
Vue(v2.6.14)源码解毒(三):响应式原理

Vue 一大特点就是数据响应式,数据的变化会作用于视图而不用进行 DOM 操作。原理上来讲,是利用了 Object.defifineProperty(),通过定义对象属性 setter 方法拦截对象属性的变更,从而将属性值的变化转换为视图的变化。
......

Vue(v2.6.14)源码解毒(二):初始化和挂载

15
08月
2021
Vue(v2.6.14)源码解毒(二):初始化和挂载

我们在使用 Vue 的时候,首页就是先 new Vue(...) ;在上一章中通过分析构建流程,我们得出入口文件 src/platforms/web/entry-runtime-with-compiler.js ,通过入口文件,我们一步一步找到 Vue 构造函数定义所在:
......

Vue(v2.6.14)源码解毒(一):准备工作

10
08月
2021
Vue(v2.6.14)源码解毒(一):准备工作

Vue3 出来也有好一整子了,但 Vue2 的源码原理学习,不论在升职加薪还是在另谋高就的路上,一直是一个必要的环节,正应了“面试造火箭,上班拧螺丝”这句话。尽管之前对 Vue2 的源码也有学习过,但是一直没有进行一个系统的总结,说白了就是懒。最近在掘金上看到 李永宁 大佬的 《Vue 源码解读》 系列文章后,又开始蠢蠢欲动了。这次主要是对核心实现的一个梳理,细节方面不会太过介绍。
......

手写一个简易版Vue

27
07月
2021
手写一个简易版Vue

MVVM 设计模式,是由 MVC、MVP 等设计模式进化而来,M - 数据模型(Model),VM - 视图模型(ViewModel),V - 视图层(View)。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。如下图所示:
......

Vue Router简单版实现

19
07月
2021
Vue Router简单版实现

SPA(single page application) :单页面应用程序,只有一个完整的页面,加载时,不会加载整个页面。当路由发生变化时,监听路由的变化,不会请求页面,而是只更新视图。路由描述的是 URL 与 UI 之间的映射关系,即 URL 变化引起 UI 更新(无需刷新页面),在 Vue 生态种提供了 VueRouter ,来实现单页面前端路由。VueRouter 常用的模式有两种:Hash模式History模式
......

Vue之组件化理解

21
04月
2021
Vue之组件化理解

组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目可维护性,便于多人协同开发。
......