从 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 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    153 引用 • 3783 回帖 • 1 关注
  • SendCloud

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

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

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 382 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 3 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 130 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 4 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 787 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注
  • Android

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

    334 引用 • 323 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • 周末

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

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

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 477 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    543 引用 • 672 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖