Vue————Vue v2.7.14 入口文件【二】

前言

​

按着我的习惯，拿到一个项目首先我会查看项目下的README.md其次查看package.json，这里也不例外看过 README.md 后，来看下package.json;

GitHub

github page

内容

package.json

vue package.json 字段解释

这里我一般只关注script部分，从这里我们再抽丝剥茧。

代码语言：javascript复制

"scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:runtime-cjs-dev",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:runtime-esm",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:server-renderer",
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:compiler ",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- runtime-cjs,server-renderer",
    "build:types": "rimraf temp && tsc --declaration --emitDeclarationOnly --outDir temp && api-extractor run && api-extractor run -c packages/compiler-sfc/api-extractor.json",
    "test": "npm run ts-check && npm run test:types && npm run test:unit && npm run test:e2e && npm run test:ssr && npm run test:sfc",
    "test:unit": "vitest run test/unit",
    "test:ssr": "npm run build:ssr && vitest run server-renderer",
    "test:sfc": "vitest run compiler-sfc",
    "test:e2e": "npm run build -- full-prod,server-renderer-basic && vitest run test/e2e",
    "test:transition": "karma start test/transition/karma.conf.js",
    "test:types": "npm run build:types && tsc -p ./types/tsconfig.json",
    "format": "prettier --write --parser typescript "(src|test|packages|types)/**/*.ts"",
    "ts-check": "tsc -p tsconfig.json --noEmit",
    "ts-check:test": "tsc -p test/tsconfig.json --noEmit",
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "release": "node scripts/release.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }

根据上面的一些运行命令，我们可以看到 vue 的 dev 是使用rollup来进行打包的，这时候我们直接看dev命令对应的配置文件（scripts/config.js）里面有些什么。

初入 VUE | 寻找入口

• 进入后我们根据命令参数full-dev进行搜索，会发现以下代码；

代码语言：javascript复制

  // Runtime compiler development build (Browser)
  'full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.ts'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },

• 点击 resolve 进行跳转，跳转到 resolve 函数下；

代码语言：javascript复制

const aliases = require('./alias')
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length   1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

• 根据上方的代码，我们再跳转到引入 alias 文件中，这时候不难发现 vue 对应的入口文件是src/platforms/web/entry-runtime-with-compiler;

代码语言：javascript复制

const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  server: resolve('packages/server-renderer/src'),
  sfc: resolve('packages/compiler-sfc/src')
}

• vue 入口代码内容

代码语言：javascript复制

import Vue from './runtime-with-compiler'
import * as vca from 'v3'
import { extend } from 'shared/util'

extend(Vue, vca)

import { effect } from 'v3/reactivity/effect'
Vue.effect = effect

export default Vue

深入 VUE | 深度挖掘

既然都找到 vue 的入口文件，那我们肯定是要继续挖掘的！

• 寻找根源

点击import Vue from './runtime-with-compiler'引入文件进行跳转，来到runtime-with-compiler.ts

代码语言：javascript复制

import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import {
  shouldDecodeNewlines,
  shouldDecodeNewlinesForHref
} from './util/compat'
import type { Component } from 'types/component'
import type { GlobalAPI } from 'types/global-api'

• 再次跳转

根据import Vue from './runtime/index'的引用，我们可以知道还需要再次跳转runtime/index.ts

代码语言：javascript复制

import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser } from 'core/util/index'

• 三次跳转

好东西果然藏得比较深，根据import Vue from 'core/index'的引用，跳转到core/index

代码语言：javascript复制

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
import { version } from 'v3'

• 四次跳转

我感觉下面就是见证奇迹的时刻了，来吧！ 根据import Vue from './instance/index'的引用，跳转到./instance/index.ts

代码语言：javascript复制

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
import type { GlobalAPI } from 'types/global-api'

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

//@ts-expect-error Vue has function type
//初始化混入 | _init
initMixin(Vue)
//@ts-expect-error Vue has function type
// 状态混入 | $set，$delete，$watch
stateMixin(Vue)
//@ts-expect-error Vue has function type
// 事件混入 | $on $once $off $emit
eventsMixin(Vue)
//@ts-expect-error Vue has function type
// 生命周期混入 | _update $forceUpdate $destroy
lifecycleMixin(Vue)
//@ts-expect-error Vue has function type
// 渲染混入 | $nextTick，_render
renderMixin(Vue)

export default Vue as unknown as GlobalAPI

经过了四次的跳转，我们终于到达了传说中的隐秘之地，首先判断如果是开发环境，且不是通过 new 关键字来进行调用的话，就会在控制台打印一个 warning，之后调用了 this._init(options)函数。

补充内容

global-api.ts

代码语言：javascript复制

import { Config } from 'core/config'
import { Component } from './component'

/**
 * @internal
 */
export interface GlobalAPI {
  // new(options?: any): Component
  (options?: any): void
  // vue 实例唯一id
  cid: number
  // 选项参数
  options: Record<string, any>
  // 全局配置
  // https://v2.cn.vuejs.org/v2/api/#全局配置
  config: Config
  // 工具函数 | warn extend mergeOptions defineReactive
  util: Object
  // 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
  // https://v2.cn.vuejs.org/v2/api/#Vue-extend
  extend: (options: typeof Component | object) => typeof Component
  // 向响应式对象中添加一个 property，并确保这个新 property
  // 同样是响应式的，且触发视图更新。
  // https://v2.cn.vuejs.org/v2/api/#Vue-set
  set: <T>(target: Object | Array<T>, key: string | number, value: T) => T
  // 删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。
  // 这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。
  // https://v2.cn.vuejs.org/v2/api/#Vue-delete
  delete: <T>(target: Object | Array<T>, key: string | number) => void
  // 在下次 DOM 更新循环结束之后执行延迟回调。
  // 在修改数据之后立即使用这个方法，获取更新后的 DOM。
  // https://v2.cn.vuejs.org/v2/api/#Vue-nextTick
  nextTick: (fn: Function, context?: Object) => void | Promise<any>
  // 安装 Vue.js 插件。
  // 如果插件是一个对象，必须提供 install 方法。
  // 如果插件是一个函数，它会被作为 install 方法。
  // install 方法调用时，会将 Vue 作为参数传入。
  // 该方法需要在调用 new Vue() 之前被调用。
  // https://v2.cn.vuejs.org/v2/api/#Vue-use
  use: (plugin: Function | Object) => GlobalAPI
  // 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。
  // 插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
  // https://v2.cn.vuejs.org/v2/api/#Vue-mixin
  mixin: (mixin: Object) => GlobalAPI
  // 将一个模板字符串编译成 render 函数。只在完整版时可用。
  // https://v2.cn.vuejs.org/v2/api/#Vue-compile
  compile: (template: string) => {
    render: Function
    staticRenderFns: Array<Function>
  }
  // 注册或获取全局指令。
  // https://v2.cn.vuejs.org/v2/api/#Vue-directive
  directive: (id: string, def?: Function | Object) => Function | Object | void
  // 注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
  // https://v2.cn.vuejs.org/v2/api/#Vue-component
  component: (
    id: string,
    def?: typeof Component | Object
  ) => typeof Component | void
  // 注册或获取全局过滤器。
  // https://v2.cn.vuejs.org/v2/api/#Vue-filter
  filter: (id: string, def?: Function) => Function | void
  // 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象
  // https://v2.cn.vuejs.org/v2/api/#Vue-observable
  observable: <T>(value: T) => T

  // allow dynamic method registration
  [key: string]: any
}

对象 函数 响应式 import 插件

0 人点赞