从 Vue 源码分析 Vue 执行过程

本贴最后更新于 1864 天前,其中的信息可能已经时移世易

初入茅庐,开始我们的 vue 之旅!

刚开始看源码,不要一行一行看,建议新建一 demo debug 慢慢调试,一点一点读,这里采用配合项目的形式,加深我们在项目中对具体方法的认知!

打开 vue 源码项目你会发现有这么几个目录,如下:

# bash
.
├── dist			// dist		
├── src				// 源码目录
│   ├── compiler		// 编译相关
│   │   ├── codegen
│   │   ├── directives
│   │   └── parser
│   ├── core			// 核心
│   │   ├── components
│   │   ├── global-api
│   │   ├── instance
│   │   │   └── render-helpers
│   │   ├── observer
│   │   ├── util
│   │   └── vdom
│   │       ├── helpers
│   │       └── modules
│   ├── platforms		// 平台相关
│   │   ├── web
│   │   │   ├── compiler
│   │   │   │   ├── directives
│   │   │   │   └── modules
│   │   │   ├── runtime
│   │   │   │   ├── components
│   │   │   │   ├── directives
│   │   │   │   └── modules
│   │   │   ├── server
│   │   │   │   ├── directives
│   │   │   │   └── modules
│   │   │   └── util
│   │   └── weex
│   │       ├── compiler
│   │       │   ├── directives
│   │       │   └── modules
│   │       │       └── recycle-list
│   │       ├── runtime
│   │       │   ├── components
│   │       │   ├── directives
│   │       │   ├── modules
│   │       │   └── recycle-list
│   │       └── util
│   ├── server			// 服务端渲染
│   │   ├── bundle-renderer
│   │   ├── optimizing-compiler
│   │   ├── template-renderer
│   │   └── webpack-plugin
│   ├── sfc
│   └── shared		// .vue 解析文件
└── types			// 测试 

compiler: 主要用于编译
core: 这里是核心中的核心,主要是 vnode、核心 api、等一些重要的封装
platforms: 适配多端平台, 比如 native(vexx)、web
server: 服务端渲染
sfc: 这里主要是 webpack 对 vue 代码编译相关
shared: 对 .vue 文件的解析

一、入口文件加载

在我们配置好项目后,debugger,点击进入:
11.png
进入断点:
22.png
会看到这样两段代码,这里定义了一个 Vue 实例,也就是 new Vue 的出处,
这里执行了 this._init(options),进而我们看看这个方法做了那些事,
这里直接贴上源码,方便阅读理解:

options:

首先 vue 会先对 options 参数进行处理,这里主要是合并 options 参数,具体下面讲.

renderProxy:

这里使用 Proxy 代理,把 render 中的 this 指向 renderProxy,也就是 vm 实例。

initLifecycle:

这里做了一些生命周期的初始化工作,初始化了很多变量,最主要是设置了父子组件的引用关系,也就是设置了 $parent$children 的值。
44.png

initEvents:

注册事件,注意这里注册的不是自己的,而是父组件的。因为父组件的监听器才会注册到子组件身上。
55.png
源码:

//instance/events.js
/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-14 10:42:22
 * @LastEditTime: 2019-08-15 16:41:19
 * @LastEditors: Please set LastEditors
 */
/* @flow */

import {
  tip,
  toArray,
  hyphenate,
  formatComponentName,
  invokeWithErrorHandling
} from '../util/index'
import { updateListeners } from '../vdom/helpers/index'

// 初始化event事件
export function initEvents (vm: Component) {
  // 创建一个新对象,并复制给vm._events实例
  vm._events = Object.create(null)
  // bool钩子用于标志位作用,这里没用哈希表查找是否有钩子,可以减少开销、性能优化
  vm._hasHookEvent = false
  // init parent attached events
  // 初始化父组件attached的事件
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

let target: any

function add (event, fn) {
  target.$on(event, fn)
}

function remove (event, fn) {
  target.$off(event, fn)
}

function createOnceHandler (event, fn) {
  const _target = target
  return function onceHandler () {
    const res = fn.apply(null, arguments)
    if (res !== null) {
      _target.$off(event, onceHandler)
    }
  }
}

export function updateComponentListeners (
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
  target = vm
  updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
  target = undefined
}

export function eventsMixin (Vue: Class<Component>) {
  const hookRE = /^hook:/
  /**
   * 绑定一个自定义监听事件
   * @event {String|Array<string>} event
   * @fn {function} function
   * @returns Component
   */
  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    const vm: Component = this
    // 如果是数组,则递归为每个绑定$on
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn)
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      // 改变标识位,这里用bool是为了性能优化
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }

  /**
   * 监听一个只能监听一次的事件,用完直接被销毁
   * @event {String} 事件
   * @fn {function} fn 回调函数
   * @returns Component
   */
  Vue.prototype.$once = function (event: string, fn: Function): Component {
    const vm: Component = this
    function on () {
      // 在第一执行后直接移除
      vm.$off(event, on)
      // 执行注册方法
      fn.apply(vm, arguments)
    }
    on.fn = fn
    vm.$on(event, on)
    return vm
  }

  /**
   * 销毁事件
   * @event {String|Array<string>} event
   * @fn {function} function 
   * @returns Component
   */
  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    const vm: Component = this
    // all
    // 如果不传参直接删除所有事件
    if (!arguments.length) {
      vm._events = Object.create(null)
      return vm
    }
    // array of events
    // 如果传入参数是数组,则递归删除
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$off(event[i], fn)
      }
      return vm
    }
    // specific event
    const cbs = vm._events[event]
    // 本身不存在直接返回
    if (!cbs) {
      return vm
    }
    if (!fn) {
      vm._events[event] = null
      return vm
    }
    // specific handler
    // 遍历寻找对应方法并删除
    let cb
    let i = cbs.length
    while (i--) {
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1)
        break
      }
    }
    return vm
  }

  /**
   * 触发当前实例上的事件。附加参数都会传给监听器回调
   * @event {String} event
   * @returns Component
   */
  Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this
    // 如果是生产环境 dev
    if (process.env.NODE_ENV !== 'production') {
      const lowerCaseEvent = event.toLowerCase()
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          `Event "${lowerCaseEvent}" is emitted in component ` +
          `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
          `Note that HTML attributes are case-insensitive and you cannot use ` +
          `v-on to listen to camelCase events when using in-DOM templates. ` +
          `You should probably use "${hyphenate(event)}" instead of "${event}".`
        )
      }
    }
    let cbs = vm._events[event]
    if (cbs) {
      // 将类数组转成数组
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      const info = `event handler for "${event}"`
      // 遍历执行
      for (let i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info)
      }
    }
    return vm
  }
}

initRender:

做一些 render 的准备工作,比如处理父子继承关系等,并没有真的开始 render。
66.png

calHook:

准备工作完成,接下来进入 create 阶段。
102.png

initInjections:

初始化 data、props 数据
103.png

initState:

初始化 data、props、computed、等
104.png

initProvider:

加载 provider
105.png

最后就是将 render 挂在到 $mount 上

// 挂载$mount到el上
if (vm.$options.el) {
      vm.$mount(vm.$options.el)// el $mount
    }

106.png

接下来解释每个的主要功能!

initState 中做了以下几件事:

function initState (vm) {
  vm._watchers = [];
  var opts = vm.$options;
//   初始化 props
  if (opts.props) { initProps(vm, opts.props); }
//   初始化 methods
  if (opts.methods) { initMethods(vm, opts.methods); }
  if (opts.data) {
//     初始化data
    initData(vm);
  } else {
//     没有data是设置data为一个 {}
    observe(vm._data = {}, true /* asRootData */);
  }
//   初始化 computed
  if (opts.computed) { initComputed(vm, opts.computed); }
//   初始化 watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch);
  }
}

initData:

function initData (vm) {
  // 拿到data
  var data = vm.$options.data;
  // 这里就是为什么我们在跟组件要写data:() 而在其他位置要写成函数的原因
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
//     判断data是否为Object
  if (!isPlainObject(data)) {
    data = {};
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    );
  }
  // proxy data on instance
  var keys = Object.keys(data);
  var props = vm.$options.props;
  var methods = vm.$options.methods;
  var i = keys.length;
//   遍历
  while (i--) {
    var key = keys[i];
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          ("Method \"" + key + "\" has already been defined as a data property."),
          vm
        );
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        "The data property \"" + key + "\" is already declared as a prop. " +
        "Use prop default value instead.",
        vm
      );
    } else if (!isReserved(key)) {
//       使用代理将data代理到vm实例上
      proxy(vm, "_data", key);
    }
  }
  // observe data
//  使用observe的方式definProperty数据双向绑定,Object.defineProperty通过setter设置值,通过getter获取值(依赖收集)
  observe(data, true /* asRootData */);
}

使用 Observer 中 definProperty 对数据进行双向绑定,Object.definPropert 实现了 getter、setter 等,使用 getter 进行依赖收集(Dep),setter 设置 data 中的值。

这里是 Dep 依赖收集

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 764 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 624 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 自由行
    10 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 709 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 641 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 2 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 72 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 304 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 2 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 9 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注