【vue3源码】十一、初始vue3中的渲染器
【vue3源码】十一、初始vue3中的渲染器
在介绍渲染器之前。我们先简单了解下渲染器的作用是什么。渲染器的生成
渲染器最主要的任务就是将虚拟DOM渲染成真实的DOM对象到对应的平台上，这里的平台可以是浏览器DOM平台，也可以是其他诸如canvas的一些平台。总之vue3的渲染器提供了跨平台的能力。
当使用
createApp创建应用实例时，会首先调用一个ensureRenderer方法。export const createApp = ((...args) => {
const app = ensureRenderer().createApp(...args)
// ...return app
}) as CreateAppFunctionensureRenderer函数会返回一个渲染器renderer，这个renderer是个全局变量，如果不存在，会使用createRenderer方法进行创建，并将创建好的renderer赋值给这个全局变量。function ensureRenderer() {
return (
renderer ||
(renderer = createRenderer(rendererOptions))
)
} createRenderer函数接收一个options参数，至于这个options中是什么，这里我们暂且先不深究。createRenderer函数中会调用baseCreateRenderer函数，并返回其结果。export function createRenderer<
HostNode = RendererNode,
HostElement = RendererElement
>(options: RendererOptions) {
return baseCreateRenderer(options)
}至此，我们就找到了真正创建渲染器的方法
baseCreateRenderer。当我们找到baseCreateRenderer的具体实现，你会发现这个函数是十分长的，单baseCreateRenderer这一个函数就占据了2044行代码，其中更是声明了30+个函数。在此我们先不用关心这些函数的作用，在后续介绍组件加载及更新过程时，你会慢慢了解这些函数。
接下来我们继续看渲染器对象的结构。
渲染器
return {
render,
hydrate,
createApp: createAppAPI(render, hydrate)
}在
baseCreateRenderer最后返回了一个对象，这个对象包含了三个属性：render（渲染函数）、hydrate（同构渲染）、createApp。这里的createApp是不是很熟悉，在createApp中调用ensureRenderer方法后面会紧跟着调用了createApp函数：export const createApp = ((...args) => {
const app = ensureRenderer().createApp(...args)
// ...return app
}) as CreateAppFunction注意这里不要两个
createApp混淆了。渲染器中的createApp并不是我们平时使用到的createApp。当我们调用createApp方法进行创建实例时，会调用渲染器中的createApp生成app实例。接下来我们来看下渲染器中的
createApp。首先createApp方法通过一个createAppAPI方法生成，这个方法接收渲染器中的render及hydrate：export function createAppAPI(
render: RootRenderFunction,
hydrate?: RootHydrateFunction
): CreateAppFunction {
return function createApp(rootComponent, rootProps = null) {
// ...
}
}createAppAPI函数会返回一个闭包函数createApp。这个createApp就是通过ensureRenderer().createApp(...args)调用的方法了。接下来看createApp的具体实现：createApp完整代码function createApp(rootComponent, rootProps = null) {
if (!isFunction(rootComponent)) {
rootComponent = { ...rootComponent }
}if (rootProps != null && !isObject(rootProps)) {
__DEV__ && warn(`root props passed to app.mount() must be an object.`)
rootProps = null
}const context = createAppContext()
const installedPlugins = new Set()let isMounted = falseconst app: App = (context.app = {
_uid: uid++,
_component: rootComponent as ConcreteComponent,
_props: rootProps,
_container: null,
_context: context,
_instance: null,version,get config() {
return context.config
},set config(v) {
if (__DEV__) {
warn(
`app.config cannot be replaced. Modify individual options instead.`
)
}
},use(plugin: Plugin, ...options: any[]) {
if (installedPlugins.has(plugin)) {
__DEV__ && warn(`Plugin has already been applied to target app.`)
} else if (plugin && isFunction(plugin.install)) {
installedPlugins.add(plugin)
plugin.install(app, ...options)
} else if (isFunction(plugin)) {
installedPlugins.add(plugin)
plugin(app, ...options)
} else if (__DEV__) {
warn(
`A plugin must either be a function or an object with an "install" ` +
`function.`
)
}
return app
},mixin(mixin: ComponentOptions) {
if (__FEATURE_OPTIONS_API__) {
if (!context.mixins.includes(mixin)) {
context.mixins.push(mixin)
} else if (__DEV__) {
warn(
'Mixin has already been applied to target app' +
(mixin.name ? `: ${mixin.name}` : '')
)
}
} else if (__DEV__) {
warn('Mixins are only available in builds supporting Options API')
}
return app
},component(name: string, component?: Component): any {
if (__DEV__) {
validateComponentName(name, context.config)
}
if (!component) {
return context.components[name]
}
if (__DEV__ && context.components[name]) {
warn(`Component "${name}" has already been registered in target app.`)
}
context.components[name] = component
return app
},directive(name: string, directive?: Directive) {
if (__DEV__) {
validateDirectiveName(name)
}if (!directive) {
return context.directives[name] as any
}
if (__DEV__ && context.directives[name]) {
warn(`Directive "${name}" has already been registered in target app.`)
}
context.directives[name] = directive
return app
},mount(
rootContainer: HostElement,
isHydrate?: boolean,
isSVG?: boolean
): any {
if (!isMounted) {
// #5571
if (__DEV__ && (rootContainer as any).__vue_app__) {
warn(
`There is already an app instance mounted on the host container.\n` +
` If you want to mount another app on the same host container,` +
` you need to unmount the previous app by calling \`app.unmount()\` first.`
)
}
const vnode = createVNode(
rootComponent as ConcreteComponent,
rootProps
)
// store app context on the root VNode.
// this will be set on the root instance on initial mount.
vnode.appContext = context// HMR root reload
if (__DEV__) {
context.reload = () => {
render(cloneVNode(vnode), rootContainer, isSVG)
}
}if (isHydrate && hydrate) {
hydrate(vnode as VNode, rootContainer as any)
} else {
render(vnode, rootContainer, isSVG)
}
isMounted = true
app._container = rootContainer
// for devtools and telemetry
;
(rootContainer as any).__vue_app__ = appif (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
app._instance = vnode.component
devtoolsInitApp(app, version)
}return getExposeProxy(vnode.component!) || vnode.component!.proxy
} else if (__DEV__) {
warn(
`App has already been mounted.\n` +
`If you want to remount the same app, move your app creation logic ` +
`into a factory function and create fresh app instances for each ` +
`mount - e.g. \`const createMyApp = () => createApp(App)\``
)
}
},unmount() {
if (isMounted) {
render(null, app._container)
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
app._instance = null
devtoolsUnmountApp(app)
}
delete app._container.__vue_app__
} else if (__DEV__) {
warn(`Cannot unmount an app that is not mounted.`)
}
},provide(key, value) {
if (__DEV__ && (key as string | symbol) in context.provides) {
warn(
`App already provides property with key "${String(key)}". ` +
`It will be overwritten with the new value.`
)
}context.provides[key as string | symbol] = valuereturn app
}
})if (__COMPAT__) {
installAppCompatProperties(app, context, render)
}return app
} 这个
createApp函数与vue提供的createApp一样，都接受一个根组件参数和一个rootProps（根组件的props）参数。首先，如果根组件不是方法时，会将
rootComponent使用解构的方式重新赋值为一个新的对象，然后判断rootProps如果不为null并且也不是个对象，则会将rootProps置为null。if (!isFunction(rootComponent)) {
rootComponent = { ...rootComponent }
}if (rootProps != null && !isObject(rootProps)) {
__DEV__ && warn(`root props passed to app.mount() must be an object.`)
rootProps = null
}然后调用
createAppContext()方法创建一个上下文对象。export function createAppContext(): AppContext {
return {
app: null as any,
config: {
// 一个判断是否为原生标签的函数
isNativeTag: NO,
performance: false,
globalProperties: {},
// 自定义options的合并策略
optionMergeStrategies: {},
errorHandler: undefined,
warnHandler: undefined,
// 组件模板的运行时编译器选项
compilerOptions: {}
},
// 存储全局混入的mixin
mixins: [],
// 保存全局注册的组件
components: {},
// 保存注册的全局指令
directives: {},
// 保存全局provide的值
provides: Object.create(null),
// 缓存组件被解析过的options（合并了全局mixins、extends、局部mixins）
optionsCache: new WeakMap(),
// 缓存每个组件经过标准化的的props options
propsCache: new WeakMap(),
// 缓存每个组件经过标准化的的emits options
emitsCache: new WeakMap()
}
}然后声明了一个
installedPlugins集合和一个布尔类型的isMounted。其中installedPlugins会用来存储使用use安装的plugin，isMounted代表根组件是否已经挂载。const installedPlugins = new Set()
let isMounted = false紧接着声明了一个
app变量，这个app变量就是app实例，在创建app的同时会将app添加到上下文中的app属性中。const app: APP = (context.app = { //... })然后会处理
vue2的兼容。这里我们暂时不深究vue2的兼容处理。if (__COMPAT__) {
installAppCompatProperties(app, context, render)
}最后返回
app。至此createaApp执行完毕。app应用实例
接下来我们看下
app实例的构造:const app: App = (context.app = {
_uid: uid++,
_component: rootComponent as ConcreteComponent,
_props: rootProps,
_container: null,
_context: context,
_instance: null,version,get config() { // ... },set config(v) { // ... },use(plugin: Plugin, ...options: any[]) { //... },mixin(mixin: ComponentOptions) { //... },component(name: string, component?: Component): any { //... },directive(name: string, directive?: Directive) { //... },mount(
rootContainer: HostElement,
isHydrate?: boolean,
isSVG?: boolean
): any { //... },unmount() { //... },provide(key, value) { //... }
})_uid：app的唯一标识，每次都会使用uid为新app的唯一标识，在赋值后，uid会进行自增，以便下一个app使用_component：根组件_props：根组件所需的props_container：需要将根组件渲染到的容器_context：app的上下文_instance：根组件的实例version：vue的版本get config：获取上下文中的config
get config() { return context.config }
set config：拦截app.config的set操作，防止app.config被修改
set config(v) { if (__DEV__) { warn( `app.config cannot be replaced. Modify individual options instead.` ) } }
app.use方法安装plugin。对于重复安装多次的plugin，只会进行安装一次，这都依靠installedPlugins，每次安装新的plugin后，都会将plugin存入installedPlugins，这样如果再次安装同样的plugin，就会避免多次安装。use(plugin: Plugin, ...options: any[]) {
// 如果已经安装过plugin，则不需要再次安装
if (installedPlugins.has(plugin)) {
__DEV__ && warn(`Plugin has already been applied to target app.`)
} else if (plugin && isFunction(plugin.install)) { // 如果存在plugin，并且plugin.install是个方法
// 将plugin添加到installedPlugins
installedPlugins.add(plugin)
// 调用plugin.install
plugin.install(app, ...options)
} else if (isFunction(plugin)) { 如果plugin是方法
// 将plugin添加到installedPlugins
installedPlugins.add(plugin)
// 调plugin
plugin(app, ...options)
} else if (__DEV__) {
warn(
`A plugin must either be a function or an object with an "install" ` +
`function.`
)
}
// 最后返回app，以便可以链式调用app的方法
return app
}app.mixin() 使用
app.mixin进行全局混入，被混入的对象会被存在上下文中的mixins中。注意mixin只会在支持options api的版本中才能使用，在mixin中会通过__FEATURE_OPTIONS_API__进行判断，这个变量会在打包过程中借助@rollup/plugin-replace进行替换。mixin(mixin: ComponentOptions) {
if (__FEATURE_OPTIONS_API__) {
if (!context.mixins.includes(mixin)) {
context.mixins.push(mixin)
} else if (__DEV__) {
warn(
'Mixin has already been applied to target app' +
(mixin.name ? `: ${mixin.name}` : '')
)
}
} else if (__DEV__) {
warn('Mixins are only available in builds supporting Options API')
}
return app
}app.component() 使用
app.compoent全局注册组件，也可用来获取name对应的组件。被注册的组件会被存在上下文中的components中。component(name: string, component?: Component): any {
// 验证组件名是否符合要求
if (__DEV__) {
validateComponentName(name, context.config)
}
// 如果不存在component，那么会返回name对应的组件
if (!component) {
return context.components[name]
}
if (__DEV__ && context.components[name]) {
warn(`Component "${name}" has already been registered in target app.`)
}
context.components[name] = component
return app
}app.directive() 注册全局指令，也可用来获取
name对应的指令对象。注册的全局指令会被存入上下文中的directives中。directive(name: string, directive?: Directive) {
// 验证指令名称
if (__DEV__) {
validateDirectiveName(name)
}
// 如果不存在directive，则返回name对应的指令对象
if (!directive) {
return context.directives[name] as any
}
if (__DEV__ && context.directives[name]) {
warn(`Directive "${name}" has already been registered in target app.`)
}
context.directives[name] = directive
return app
}app.mount() 此处的
app.mount并不是我们平时使用到的mount。创建完渲染器，执行完渲染器的createApp后，会重写mount方法，我们使用的mount方法是被重写的mount方法。mount(
rootContainer: HostElement,
isHydrate?: boolean,
isSVG?: boolean
): any {
// 如果未挂载，开始挂载
if (!isMounted) {
// 如果存在rootContainer.__vue_app__，说明容器中已经存在一个app实例了，需要先使用unmount进行卸载
if (__DEV__ && (rootContainer as any).__vue_app__) {
warn(
`There is already an app instance mounted on the host container.\n` +
` If you want to mount another app on the same host container,` +
` you need to unmount the previous app by calling \`app.unmount()\` first.`
)
}
// 创建根组件的虚拟DOM
const vnode = createVNode(
rootComponent as ConcreteComponent,
rootProps
)
// 将上下文添加到根组件虚拟dom的appContext属性中
vnode.appContext = context// HMR root reload
if (__DEV__) {
context.reload = () => {
render(cloneVNode(vnode), rootContainer, isSVG)
}
}// 同构渲染
if (isHydrate && hydrate) {
hydrate(vnode as VNode, rootContainer as any)
} else {
// 客户端渲染
render(vnode, rootContainer, isSVG)
}
// 渲染完成后将isMounted置为true
isMounted = true
// 将容器添加到app的_container属性中
app._container = rootContainer
// 将rootContainer.__vue_app__指向app实例
;
(rootContainer as any).__vue_app__ = appif (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
// 将根组件实例赋给app._instance
app._instance = vnode.component
devtoolsInitApp(app, version)
}// 返回根组件expose的属性
return getExposeProxy(vnode.component!) || vnode.component!.proxy
} else if (__DEV__) { // 已经挂载了
warn(
`App has already been mounted.\n` +
`If you want to remount the same app, move your app creation logic ` +
`into a factory function and create fresh app instances for each ` +
`mount - e.g. \`const createMyApp = () => createApp(App)\``
)
}
} app.unmount() 卸载应用实例。
unmount() {
// 如果已经挂载才能进行卸载
if (isMounted) {
// 调用redner函数，此时虚拟节点为null，代表会清空容器中的内容
render(null, app._container)
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
// 将app._instance置空
app._instance = null
devtoolsUnmountApp(app)
}
// 删除容器中的__vue_app__
delete app._container.__vue_app__
} else if (__DEV__) {
warn(`Cannot unmount an app that is not mounted.`)
}
}app.provide() 全局注入一些数据。这些数据会被存入上下文对象的
provides中。provide(key, value) {
if (__DEV__ && (key as string | symbol) in context.provides) {
warn(
`App already provides property with key "${String(key)}". ` +
`It will be overwritten with the new value.`
)
}context.provides[key as string | symbol] = valuereturn app
}总结
vue3中的渲染器主要作用就是将虚拟DOM转为真实DOM渲染到对应平台中，在这个渲染过程中会包括DOM的挂载、DOM的更新等操作。【【vue3源码】十一、初始vue3中的渲染器】通过
baseCreateRenderer方法会创建一个渲染器renderer，renderer中有三个方法：render、hydrate、createApp，其中render方法用来进行客户端渲染，hydrate用来进行同构渲染，createApp用来创建app实例。baseCreateRenderer中包含了大量的函数用来处理挂载组件、更新组件等操作。推荐阅读
- 【SQLServer】并行的保留线程和已使用线程
- “种草”成新媒体营销策划重点，微信抖音小红书网红大号KOL达人带货投放服务怎么选
- 我曾经喜欢的书
- 日更
- java|SpringBoot+MyBatisPlus
- springboot系列|【springboot系列】springboot整合mybatisplus实现CRUD
- 小程序实现计时器小功能
- 双亲委派模型的优势
- 房地产|【房地产行业周报】融创中国回应债权人清盘；富力地产亏损出售北京富力万达嘉华酒店；郑州发布“大干30天，确保停工楼盘全面复工”专项行动
- 单细胞系列|SCS【6】单细胞转录组之细胞类型自动注释 (SingleR)