Vue源码解读

1.下载vue源码

git clone https://github.com/vuejs/vue.git

目前使用的是pnpm，如果没有全局安装pnpm

npm i pnpm -g

安装了之后运行

pnpm i 

修改package.json的scripts脚本，增加 --sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:full-dev"

运行pnpm run build,将会在dist中生成文件

pnpm run build

2.源码解析

new Vue(options);

vue定义 core/instance/index.ts,初始化思维导图

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
initMixin(Vue)
//@ts-expect-error Vue has function type
stateMixin(Vue)
//@ts-expect-error Vue has function type
eventsMixin(Vue)
//@ts-expect-error Vue has function type
lifecycleMixin(Vue)
//@ts-expect-error Vue has function type
renderMixin(Vue)

export default Vue as unknown as GlobalAPI