vue框架主要流程分析
目标
- 调试环境搭建
- 理顺vue源码学习整体流程
- 数据响应式
获取
- 迁出项目: git clone https://github.com/vuejs/vue.git
环境
安装依赖
安装rollup
rollup是打包工具，用于打包纯代码项目
npm i rollup -g
修改dev脚本，添加surcemap,package.json文件
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-
full-dev",此时在dist文件夹下生成一个可进行调试的vue.js文件
运行
- npm run dev
- 引入前面创建的vue.js
文件夹
-
dist
- common commonjs老版本的打包工具 webpack1、
browserify 符合require
- esm 现代打包工具es6模块化 版本 webpack2等
- umd 兼容cjs（服务器）和amd（浏览器）
- runtime 仅包含运行时 （没有编译器，打包后预编译了）
- common commonjs老版本的打包工具 webpack1、
- examples测试代码
- flow 类型声明
- packages 独立于核心代码以外的模块
- scripts 打包脚本
-
src 源码目录
- compiler 编译器
- core 核心
- plateforms 平台特殊的 浏览器 移动端weex
- server 编译器
- sfc 单文件解析器
- shared 帮助代码
-
types ts的类型声明 和flow对应目录 专门给flow写的
- 同上
入口
- dev脚本中 -c scripts/config.js 指明配置文件所在 参数
- TARGET:web-full-dev 指明输出文件配置项
初始化流程
- 入口 platforms/web/entry-runtime-with-compiler.js
- 扩展默认$mount方法:处理template或el选项，尝试编译他们为render函数
- render > template > el
- platforms/web/runtime/index.js
- 定义$mount:挂载根组件到指定宿主元素(mountComponent(this, el, hydrating))
- 定义__patch__:补丁函数，执行patching算法进行更新
- core/index.js 实现全局api，具体如下
Vue.set \= set
Vue.delete \= del
Vue.nextTick \= nextTick
initUse(Vue) // 实现Vue.use函数
initMixin(Vue) // 实现Vue.mixin函数
initExtend(Vue) // 实现Vue.extend函数
initAssetRegisters(Vue) // 注册实现Vue.component/directive/filter- core/instance/index.js Vue构造函数定义，实例api定义
function Vue (options) { // 构造函数仅执行了\_init this.\_init(options)
}
initMixin(Vue) // 实现init函数
stateMixin(Vue) // 状态相关api $data,$props,$set,$delete,$watch eventsMixin(Vue)// 事件相关api $on,$once,$off,$emit lifecycleMixin(Vue) // 生命周期api \_update,$forceUpdate,$destroy renderMixin(Vue)// 渲染api \_render,$nextTick- core/instance/init.js 创建组件实例，初始化其数据、属性、事件等
initLifecycle(vm) // $parent,$root,$children,$refs initEvents(vm) // 处理父组件传递的监听器
initRender(vm) // $slots,$scopedSlots,\_c,$createElement callHook(vm, 'beforeCreate')
initInjections(vm) // 获取注入数据
initState(vm) // 初始化props，methods，data，computed，watch initProvide(vm) // 提供数据注入
callHook(vm, 'created')- mountComponent core/instance/lifecycle.js执行挂载，测试代码
vue初始化
数据响应式
Vue一大特点是数据响应式，数据的变化会作用于UI而不用进行DOM操作。原理上来讲，是利用了JS语 言特性Object.defineProperty()，通过定义对象属性setter方法拦截对象属性变更，从而将数值的变化 转换为UI的变化。
具体实现是在Vue初始化时，会调用initState，它会初始化data，props等，这里着重关注data初始 化，
入口
src\core\instance\state.js初始化数据
实例
core/observer/index.js observe方法返回一个Observer实例
响应化操作
- core/observer/index.js
- Observer对象根据数据类型执行对应的响应化操作
- defineReactive给data中每一个key定义数据的劫持（定义对象属性的getter/setter），getter负责添加依赖，setter负责通知更新
- core/observer/dep.js维护管理若干watcher
Watcher
Watcher解析一个表达式并收集依赖，当数值变化时触发回调函数，常用于$watch API和指令中。 每个组件也会有对应的Watcher，数值变化会触发其update函数导致重新渲染
export default class Watcher {
constructor () {}
get () {}
addDep (dep: Dep) {}
update () {}
}数组响应化
数组数据变化的侦测跟对象不同，我们操作数组通常使用push、pop、splice等方法，此时没有办法得 知数据变化。所以vue中采取的策略是拦截这些方法并通知dep。
- src\core\observer\array.js 为数组原型中的7个可以改变内容的方法定义拦截器
import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto) //数组的原型对象 进行了克隆 经过拦截了的数组
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]- Observer中覆盖数组原型
if (Array.isArray(value)) {
// 替换数组原型
protoAugment(value, arrayMethods) // value.\_\_proto\_\_ = arrayMethods this.observeArray(value)
}- 额外的任务 进行通知
const ob = this.__ob__
let inserted
// 以下三个操作需要额外的响应化处理
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}理解响应式原理的实现，我们可以知道以下注意事项:
- 对象各属性初始化时进行一次响应化处理，以后再动态设置是无效的
data: {obj:{foo: 'foo'}}
// 无效
this.obj.bar \= 'bar'
// 有效
this.$set(this.obj, 'bar', 'bar')- 数组是通过方法拦截实现响应化处理，不通过方法操作数组也是无效的
` ~~~~
data: {items: ['foo','bar']}
// 无效
this.items[0] = 'tua' this.items.length = 0
// 有效
this.$set(this.items, 0, 'tua') this.items.splice(0, 2)