Vue 源码解读（2）—— Vue 初始化过程

最新推荐文章于 2023-07-25 16:39:10 发布

觉醒的Coder

最新推荐文章于 2023-07-25 16:39:10 发布

阅读量404

点赞数

分类专栏：前端 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Guolicheng_/article/details/119388956

版权

目标

深入理解 Vue 的初始化过程，再也不怕 面试官 的那道面试题：new Vue(options) 发生了什么？

找入口

想知道 new Vue(options) 都做了什么，就得先找到 Vue 的构造函数是在哪声明的，有两个办法：

从 rollup 配置文件中找到编译的入口，然后一步步找到 Vue 构造函数，这种方式费劲
通过编写示例代码，然后打断点的方式，一步到位，简单

我们就采用第二种方式，写示例，打断点，一步到位。

在 /examples 目录下增加一个示例文件 —— test.html，在文件中添加如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 源码解读</title>
</head>
<body>
  <div id="app">
    {
  { msg }}
  </div>
  <script src="../dist/vue.js"></script>
  <script> debugger
    new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      }
    }) </script>
</body>
</html>

在浏览器中打开控制台，然后打开 test.html，则会进入断点调试，然后找到 Vue 构造函数所在的文件

Mar-26-2021 08-30-52.gif

得到 Vue 构造函数在 /src/core/instance/index.js 文件中，接下来正式开始源码阅读，带着目标去阅读。

在阅读过程中如遇到看不明白的地方，可通过编写示例代码，然后使用浏览器的调试功能进行一步步调试，配合理解，如果还是理解不了，就做个备注继续向后看，也许你看到其它地方，就突然明白这个地方在做什么，或者回头再来看，就会懂了，源码这个东西，一定要多看，要想精通，一遍两遍肯定是不够的

源码解读 —— Vue 初始化过程

Vue

/src/core/instance/index.js

import { initMixin } from './init'

// Vue 构造函数
function Vue (options) {
  // 调用 Vue.prototype._init 方法，该方法是在 initMixin 中定义的
  this._init(options)
}

// 定义 Vue.prototype._init 方法
initMixin(Vue)

export default Vue

Vue.prototype._init

/src/core/instance/init.js

/**
 * 定义 Vue.prototype._init 方法 
 * @param {*} Vue Vue 构造函数
 */
export function initMixin (Vue: Class<Component>) {
  // 负责 Vue 的初始化过程
  Vue.prototype._init = function (options?: Object) {
    // vue 实例
    const vm: Component = this
    // 每个 vue 实例都有一个 _uid，并且是依次递增的
    vm._uid = uid++

    // a flag to avoid this being observed
    vm._isVue = true
    // 处理组件配置项
    if (options && options._isComponent) {
      /**
       * 每个子组件初始化时走这里，这里只做了一些性能优化
       * 将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率
       */
      initI

最低0.47元/天解锁文章

觉醒的Coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 源码解读（2）—— Vue 初始化过程

目标深入理解 Vue 的初始化过程，再也不怕面试官的那道面试题：new Vue(options) 发生了什么？找入口想知道 new Vue(options) 都做了什么，就得先找到 Vue 的构造函数是在哪声明的，有两个办法：从 rollup 配置文件中找到编译的入口，然后一步步找到 Vue 构造函数，这种方式费劲通过编写示例代码，然后打断点的方式，一步到位，简单我们就采用第二种方式，写示例，打断点，一步到位。在 /examples 目录下增加一个示例文件 —— test.
复制链接

扫一扫