Vue进阶之源码阅读

最新推荐文章于 2024-04-23 12:10:57 发布

Bal炎魔

最新推荐文章于 2024-04-23 12:10:57 发布

阅读量174

点赞数

分类专栏： Vue 笔记

本文链接：https://blog.csdn.net/weixin_44479322/article/details/111657893

版权

笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

Vue进阶之源码阅读

阅读方式

先宏观了解，看大致目录和结构；
带着目标看源码，明确核心功能，要意识到我是谁、我在哪儿、我要做什么；
看源码的过程要不求甚解，跳过分支功能；
调试其运行过程；

Vue 的不同构建版本

官方文档 - 对不同构建版本的解释 dist\README.md https://github.com/vuejs/vue/tree/dev/dist

在这里插入图片描述

完整版:同时包含编译器和运行时的版本。
编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低。
运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码，体积小、效率高。基本上就是除去编译器的代码。
UMD:UMD 版本通用的模块版本，支持多种模块方式。默认文件就是运行时 + 编译器的 UMD 版本
CommonJS(cjs):CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1
ES Module:从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的
版本。
- ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。
- ES6 模块与 CommonJS 模块的差异

从入口文件开始

提示：阅读源码时vscode默认会自动检测js语法，在vscode设置中改为false，不校验"javascript.validate.enable": false,

从package.json文件的启动命令可以找到配置文件，script/config.js，继续变可找到入口配置

// Runtime+compiler development build (Browser)
'web-full-dev': {
	entry: resolve('web/entry-runtime-with-compiler.js'), dest: resolve('dist/vue.js'),
	format: 'umd',
	env: 'development',
	alias: { he: './entity-decoder' },
	banner
},

则dev模式的入口文件为 src/platform/web/entry-runtime-with-compiler.js

阅读记录

入口文件

src/platforms/web/entry-runtime-with-compiler.js

el 不能是 body 或者 html 标签;
如果没有 render，把 template 转换成 render 函数
如果有 render 方法，直接调用 mount 挂载 DOM，不再处理template模板

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // 获取document元素
  el = el && query(el)

  /* istanbul ignore if */ // el元素不能是body和html
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  // 如果没有render函数就处理template模板，将template编译为render函数
  if (!options.render) {
    ...
  }
  return mount.call(this, el, hydrating)
}

这里根据import 引入一直查找，可找到四个导出Vue相关的模块儿

src/platforms/web/entry-runtime-with-compiler.js
- web 平台相关的入口
- 重写了平台相关的 $mount() 方法
- 注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数
src/platforms/web/runtime/index.js
- web 平台相关
- 注册和平台相关的全局指令:v-model、v-show
- 注册和平台相关的全局组件: v-transition、v-transition-group
- 全局方法:patch:把虚拟 DOM 转换成真实 DOM，$mount:挂载方法
src/core/index.js
- 与平台无关
- 设置了 Vue 的静态方法，initGlobalAPI(Vue)
src/core/instance/index.js
- 与平台无关
- 定义了构造函数，调用了 this._init(options) 方法
- 给 Vue 中混入了常用的实例成员

Vue 的初始化

初始化 Vue 的静态方法 src/core/global-api/index.js

// 注册 Vue 的静态属性/方法 
initGlobalAPI(Vue)
// src/core/global-api/index.js
// 初始化 Vue.config 对象 
Object.defineProperty(Vue, 'config', configDef)
// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on // them unless you are aware of the risk.
// 这些工具方法不视作全局API的一部分，除非你已经意识到某些风险，否则不要去依赖他们 
Vue.util = {
  warn,
  extend,
  mergeOptions,
  defineReactive
}
// 静态方法 set/delete/nextTick 
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
// 2.6 explicit observable API
// 让一个对象可响应
Vue.observable = <T>(obj: T): T => {
  observe(obj)
  return obj 
}
// 初始化 Vue.options 对象，并给其扩展
// components/directives/filters/_base 
Vue.options = Object.create(null) 
ASSET_TYPES.forEach(type => {
Vue.options[type + 's'] = Object.create(null) })
// this is used to identify the "base" constructor to extend all plain- object
// components with in Weex's multi-instance scenarios. 
Vue.options._base = Vue
// 设置 keep-alive 组件 
extend(Vue.options.components, builtInComponents)
// 注册 Vue.use() 用来注册插件 
initUse(Vue)
// 注册 Vue.mixin() 实现混入 
initMixin(Vue)
// 注册 Vue.extend() 基于传入的 options 返回一个组件的构造函数 
initExtend(Vue)
// 注册 Vue.directive()、 Vue.component()、Vue.filter() 
initAssetRegisters(Vue)

初始化 Vue 的实例成员

定义 Vue 的构造函数 src/core/instance/index.js

// 此处不用class的原因是因为之后方便给Vue实例混入实例成员
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
    // 判断是否使用new 方法来创建实例 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  // 调用 _init()方法
  this._init(options)
}
// 注册 vm 实例的init方法初始化； 为实例注册方法
initMixin(Vue)
// 注册 vm 实例的状态方法，$data/$props/$set/$delete/$watch
stateMixin(Vue)
// 注册 vm 实例的事件方法，观察者模式，$on/$once/$off/$emit
eventsMixin(Vue)
// 注册 vm 实例的部分生命周期方法, _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 注册 vm 实例的render函数和$nextTick函数
renderMixin(Vue)

initMixin(Vue)

初始化 _init() 方法 src/core/instance/init.js

// src\core\instance\init.js
export function initMixin (Vue: Class<Component>) { // 给 Vue 实例增加 _init() 方法
// 合并 options / 初始化操作
Vue.prototype._init = function (options?: Object) {
// a flag to avoid this being observed // 如果是 Vue 实例不需要被 observe vm._isVue = true
// merge options
// 合并 options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor), options || {},
vm
) }
      /* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') { initProxy(vm)
} else { vm._renderProxy = vm
}
// expose real self
vm._self = vm
// vm 的生命周期相关变量初始化
// $children/$parent/$root/$refs
initLifecycle(vm)
// vm 的事件监听初始化, 父组件绑定在当前组件上的事件 initEvents(vm)
// vm 的编译render初始化
// $slots/$scopedSlots/_c/$createElement/$attrs/$listeners initRender(vm)
// beforeCreate 生命钩子的回调
callHook(vm, 'beforeCreate')
// 把 inject 的成员注入到 vm 上
initInjections(vm) // resolve injections before data/props // 初始化状态 vm 的 _props/methods/_data/computed/watch initState(vm)
// 初始化 provide
initProvide(vm) // resolve provide after data/props
// created 生命钩子的回调
callHook(vm, 'created')
      /* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false) mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
// 如果没有提供 el，调用 $mount() 挂载 if (vm.$options.el) {
vm.$mount(vm.$options.el) }
} }

首次渲染过程

Vue 初始化完毕，开始真正的执行
调用 new Vue() 之前，已经初始化完毕

在这里插入图片描述

数据响应式原理

一些总结
1、Vue的observe方法，将数据变为响应式，就是给对象添加get、set方法，set方法中触发此属性的发布者后通知观察者，观察者再去做相应变化，get方法中，判断此属性是否有观察者添加，有就添加。

2、在Vue中当数据被调用，或者被改变时都会调用 watcher 的 get 方法，在get方法中就会触发Dep的target属性去将watcher添加到次数据的Dep的观察者列表中，使得dep可以在数据改变时触发watcher变化。如何添加观察者的核心。

3、这里有两个get，watcher的get去触发触发数据的get，在数据的get中添加观察者。

4、watcher的get是怎么被调用的呢，实例化时在watcher的构造函数中就会调用get方法；也就是new watcher的地方就会调用。

关于渲染 Watcher

渲染Watcher，将渲染的函数独立放出在 Watcher 的get中去调用函数，其中渲染函数会调用用到变量的get，此时就可以给对应的属性添加Watcher，到对应的Dep中，切注册updata为该渲染函数，则当其中任意一个变量变化都会执行该渲染函数去渲染。

new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

关于Vue中的响应式数组

Vue中修补了，原生数组中可以修改数组的方法，为其增加了响应式监听，所以在使用这些方法改变数组的方法时，就可更新视图
方法有

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

所以在vue中

var vm = new Vue({
	el:'#app',
	data: {
		arr:[1,2,3]
	}
})

vm.arr.push(8);  //可以更新视图
vm.arr[0] = 100; //不会更新视图
vm.arr.length = 0; //不会更新视图

Dep 类 (发布者)

位置 src\core\observer\dep.js

依赖对象
记录 watcher 对象
depend() – watcher 记录对应的 dep
发布通知

在 defineReactive() 的 getter 中创建 dep 对象，并判断 Dep.target 是否有值(一会再来看有什么
时候有值得), 调用 dep.depend()
dep.depend() 内部调用 Dep.target.addDep(this)，也就是 watcher 的 addDep() 方法，它内部最
调用 dep.addSub(this)，把 watcher 对象，添加到 dep.subs.push(watcher) 中，也就是把订阅者
添加到 dep 的 subs 数组中，当数据变化的时候调用 watcher 对象的 update() 方法
什么时候设置的 Dep.target? 通过简单的案例调试观察。调用 mountComponent() 方法的时候，创建了
渲染 watcher 对象，执行 watcher 中的 get() 方法
get() 方法内部调用 pushTarget(this)，把当前 Dep.target = watcher，同时把当前 watcher 入栈，
因为有父子组件嵌套的时候先把父组件对应的 watcher 入栈，再去处理子组件的 watcher，子组件的处理完毕
后，再把父组件对应的 watcher 出栈，继续操作
Dep.target 用来存放目前正在使用的watcher。全局唯一，并且一次也只能有一个 watcher 被使用

Watcher 类

Watcher 分为三种，Computed Watcher、用户 Watcher (侦听器)、渲染 Watcher 渲染
Watcher 的创建时机位置/src/core/instance/lifecycle.js
渲染 wacher 创建的位置 lifecycle.js 的 mountComponent 函数中
Wacher 的构造函数初始化，处理 expOrFn (渲染 watcher 和侦听器处理不同)
调用 this.get() ，它里面调用 pushTarget() 然后 this.getter.call(vm, vm) (对于渲染 wacher 调用 updateComponent)，如果是用户 wacher 会获取属性的值(触发get操作)
当数据更新的时候，dep 中调用 notify() 方法，notify() 中调用 wacher 的 update() 方法
update() 中调用 queueWatcher()
queueWatcher() 是一个核心方法，去除重复操作，调用 flushSchedulerQueue() 刷新队列并执行 watcher
flushSchedulerQueue() 中对 wacher 排序，遍历所有 wacher ，如果有 before，触发生命周期的钩子函数 beforeUpdate，执行 wacher.run()，它内部调用 this.get()，然后调用 this.cb() (渲染 wacher 的 cb 是 noop)
整个流程结束