Vue 进阶 [七] Vue 源码剖析 01 剖析入口 & 数据响应式

落日映苍穹つ 2022-12-11 07:59 210阅读 0赞

> 业精于勤荒于嬉

今天又听了一节课，吸收的没那么好，但也是有收获，一直想像看Android 源码那样，研究研究Vue的源码，苦于不知道从何下手，听了这节课，大概知道应该从哪里入手了。

项目地址： https://github.com/vuejs/vue

迁出项目：  git clone https://github.com/vuejs/vue.git

当前版本号： 2.6.X

# **入口**  #

dev 脚本中  \- c scripts/config.js  指明配置文件所在

参数  TARGET:web \- full \- dev  指明输出文件配置项， line:123

'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
      },

# **初始化流程**  #

**入口** **platforms/web/entry-runtime-with-compiler.js**

扩展默认$mount方法：处理template或el选项

**platforms/web/runtime/index.js**

安装 web 平台特有指令和组件

定义 \_\_patch\_\_ ：补丁函数，执行 patching 算法进行更新

定义 $mount ：挂载 vue 实例到指定宿主元素（获得 dom 并替换宿主元素）

**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 构造函数定义

定义 Vue 实例 API：

function Vue(options) {
      if (process.env.NODE_ENV !== 'production' &&
        !(this instanceof Vue)
      ) {
        warn('Vue is a constructor and should be called with the `new` keyword')
      }
      this._init(options)
    }

**core/instance/init.js**

创建组件实例，初始化其数据、属性、事件等

initLifecycle(vm) //$parent $root $children $refs
        initEvents(vm) //处理父组件传入的事件和回调 添加监听
        initRender(vm) // 声明$slots $createElement() 
        callHook(vm, 'beforeCreate') //调用beforeCreate 钩子
        initInjections(vm) // // 注入数据 resolve injections before data/props
        initState(vm) // 重要：数据初始化，响应式
        initProvide(vm) // 提供数据  // resolve provide after data/props
        callHook(vm, 'created')

**mountComponent core/instance/lifecycle.js**

执行挂载，获取 vdom 并转换为 dom

**render() src\\core\\instance\\render.js**

渲染组件，获取 vdom

**update() src\\core\\instance\\lifecycle.js**

执行更新，将传入 vdom 转换为 dom ，初始化时执行的是 dom 创建操作

**总体流程：**

new Vue() => \_init() => $mount() => \_render() => \_update()

# **数据响应式**  #

Vue 一大特点是数据响应式，数据的变化会作用于 UI 而不用进行 DOM 操作。原理上来讲，是利用了 JS 语

言特性 Object.defifineProperty() ，通过定义对象属性 setter 方法拦截对象属性变更，从而将数值的变化

转换为 UI 的变化。