【源码&库】细数 Vue3 的实例方法和属性背后的故事

上一章我们翻看了Vue3的源码的createApp的实现，并实现了一个简单的createApp；

在翻看的过程中我们发现了Vue3的createApp的实现中，有很多的方法，比如mount、provide、use、component、directive、mixin等等；

而这些方法在官方文档中都是有提及的，今天我们就来扒一扒Vue3 API 参考 -> 应用实例背后的实现。

大家好，这里是田八的【源码&库】系列，Vue3的源码阅读计划，Vue3的源码阅读计划不出意外每周一更，欢迎大家关注。

如果想一起交流的话，可以点击这里一起共同交流成长

系列章节：

• 【源码&库】跟着 Vue3 学习前端模块化
• 【源码&库】在调用 createApp 时，Vue 为我们做了那些工作？

初窥

我们先来看看官网上的Vue3的API的应用实例的列表：

上一章我们已经实现了createApp的方法，同时也知道了createApp的方法返回的是一个app对象；

列表中从mount开始的方法都是app对象的方法，而mount在上一章中我们也已经实现了，所以我们今天就看后面的方法。

同时列表的后面还有一些实例属性，这些也是在我们今天的学习任务中的；

接下来的学习就是边跟着官方文档的介绍，边看源码的实现，来熟悉这些方法和属性；

在上一节中我们了解到了，createApp返回的app对象是在createAppAPI中创建的，我们先来回顾一下createAppAPI的实现：

let uid$1 = 0;
function createAppAPI(render, hydrate) {
    return function createApp(rootComponent, rootProps = null) {
        // ...
        
        const context = createAppContext();
        const installedPlugins = new Set();
        let isMounted = false;
        const app = (context.app = {
            _uid: uid$1++,
            _component: rootComponent,
            _props: rootProps,
            _container: null,
            _context: context,
            _instance: null,
            version,
            get config() {
                return context.config;
            },
            set config(v) {
                if ((process.env.NODE_ENV !== 'production')) {
                    warn(`app.config cannot be replaced. Modify individual options instead.`);
                }
            },
            use(plugin, ...options) {
                // ...
                return app;
            },
            mixin(mixin) {
                // ...
                return app;
            },
            component(name, component) {
                // ...
                return app;
            },
            directive(name, directive) {
                // ...
                return app;
            },
            mount(rootContainer, isHydrate, isSVG) {
                // ...
            },
            unmount() {
                // ...
            },
            provide(key, value) {
                // ...
                return app;
            }
        });
        return app;
    };
}

通过上面的代码可以看到的，官网介绍的app实例方法是一个也不少都在这；

至于属性的话，version和config也是都在，不同的是config是一个getter和setter，是通过上下文中的config来实现的；

上下文的context是在createAppContext中创建的，这个在上一章中也有提及，忘记了的可以回顾一下；

function createAppContext() {
    return {
        app: null,
        config: {
            isNativeTag: NO,
            performance: false,
            globalProperties: {},
            optionMergeStrategies: {},
            errorHandler: undefined,
            warnHandler: undefined,
            compilerOptions: {}
        },
        mixins: [],
        components: {},
        directives: {},
        provides: Object.create(null),
        optionsCache: new WeakMap(),
        propsCache: new WeakMap(),
        emitsCache: new WeakMap()
    };
}

官网的介绍的实例属性在这里也是一个都不少都可以找到，不过这里还多了很多其他属性，相信通过我们的学习，这些属性的作用也会一一了解到；

下面就开始正式的学习吧。

实例方法

unmount

unmount方法的作用是卸载应用实例，官方文档的介绍如下：

卸载一个已挂载的应用实例。卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子。

函数签名如下：

interface App {
    unmount(): void
}

看一下源码的实现：

function unmount() {
    // 确认应用已经挂载
    if (isMounted) {
        // 使用 render 方法卸载应用
        render(null, app._container);
        
        // 在非生产环境下，会清除应用组件的实例
        // 并且会调用 devtoolsUnmountApp 方法, 用于卸载 devtools 插件中的应用
        if ((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) {
            app._instance = null;
            devtoolsUnmountApp(app);
        }
        
        // 删除 dom 节点上缓存的 vue 实例
        delete app._container.__vue_app__;
    }
    
    // 在非生产环境下，如果应用没有挂载，会提示该应用没有挂载
    else if ((process.env.NODE_ENV !== 'production')) {
        warn(`Cannot unmount an app that is not mounted.`);
    }
}

可以看到，unmount方法的实现也是比较简单的；

卸载应用实例就是卸载应用的根组件，卸载根组件就是调用render方法，将根组件渲染成null；

render在上一章中简单的认识了一下，这一章并不准备深入的学习render，就简单的介绍一下；

render本质就是调用了patch方法，patch方法就是Vue的核心，它的作用是将VNode渲染成真实的DOM；

render方法的第一个参数就是新的VNode，如果是null就会卸载掉旧的VNode，从而实现卸载组件的效果；

如果等不及想要了解patch方法的实现，可以在网上查查资料，网上有很多关于patch方法的解析，文章和视频都非常多，可以自行选择；

provide

provide方法的作用是提供一个可以被注入的值，官方文档的介绍如下：

提供一个值，可以在应用中的所有后代组件中注入使用。

函数签名如下：

interface InjectionKey<T> extends Symbol {}

interface App {
    /**
     * @param key 注入的值的 key
     * @param value 注入的值
     */
    provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

从函数签名可以看出，provide方法接收两个参数，第一个参数是key，第二个参数是value；

key可以是InjectionKey、symbol或者string，value可以是任意类型的值；

provide方法的实现如下：

function provide(key, value) {
    // 非生产环境下，如果 key 已经存在于 context.provides 中，会提示覆盖
    if ((process.env.NODE_ENV !== 'production') && key in context.provides) {
        warn(`App already provides property with key "${String(key)}". ` +
            `It will be overwritten with the new value.`);
    }
    
    // 将 key 和 value 存储到上下文的 provides 中
    context.provides[key] = value;
    
    // 返回 app 实例，方便链式调用
    return app;
}

可以看到，provide方法的实现也是非常简单的，直接将key和value存储到context的provides属性中即可；

component

component方法的作用是注册一个全局组件，官方文档的介绍如下：

如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。

函数签名如下：

interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

从函数签名可以看出，component方法有一个重载，一个是接收一个参数，一个是接收两个参数；

如果只传递一个参数，那么就是获取一个全局组件，如果传递两个参数，那么就是注册一个全局组件；

component方法的实现如下：

function component(name, component) {
    // 非生产环境下，会校验组件名是否合法
    if ((process.env.NODE_ENV !== 'production')) {
        validateComponentName(name, context.config);
    }
    
    // 如果只传递一个参数，那么就是获取一个全局组件
    if (!component) {
        return context.components[name];
    }
    
    // 非生产环境下，如果组件已经存在，会提示已经注册，这里没有 return，所以会被覆盖
    if ((process.env.NODE_ENV !== 'production') && context.components[name]) {
        warn(`Component "${name}" has already been registered in target app.`);
    }
    
    // 将组件存储到上下文的 components 中
    context.components[name] = component;
    
    // 返回 app 实例，方便链式调用
    return app;
}

同provide方法类似，component方法的实现也就是将组件存储到context的components属性中，这里只是多了一个函数重载的功能；

directive

directive方法的作用是注册一个全局指令，官方文档的介绍如下：

如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。

函数签名如下：

interface App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

同component方法相同，directive方法也有一个重载，一个参数是获取全局指令，两个参数是注册全局指令；

directive方法的实现如下：

function directive(name, directive) {
    // 非生产环境下，会校验指令名是否合法
    if ((process.env.NODE_ENV !== 'production')) {
        validateDirectiveName(name);
    }
    
    // 如果只传递一个参数，那么就是获取一个全局指令
    if (!directive) {
        return context.directives[name];
    }
    
    // 非生产环境下，如果指令已经存在，会提示已经注册，这里没有 return，所以会被覆盖
    if ((process.env.NODE_ENV !== 'production') && context.directives[name]) {
        warn(`Directive "${name}" has already been registered in target app.`);
    }
    
    // 将指令存储到上下文的 directives 中
    context.directives[name] = directive;
    
    // 返回 app 实例，方便链式调用
    return app;
}

和之前的都一样，directive方法的实现也是将指令存储到context的directives属性中；

use

use方法的作用是注册一个插件，官方文档的介绍如下：

安装一个插件。

非常简单的一句话，还是先看看函数签名：

type PluginInstallFunction<Options> = Options extends unknown[]
    ? (app: App, ...options: Options) => any
    : (app: App, options: Options) => any

type Plugin<Options = any[]> =
    | (PluginInstallFunction<Options> & {
    install?: PluginInstallFunction<Options>
})
    | {
    install: PluginInstallFunction<Options>
}

interface App {
  use(plugin: Plugin, ...options: any[]): this
}

use方法其实只有一个参数，就是插件，插件的类型是Plugin，可以看到Plugin的类型定义，看起来稍微有点复杂，来分解一下：

type PluginInstallFunction<Options> = Options extends unknown[]
    ? (app: App, ...options: Options) => any
    : (app: App, options: Options) => any

这里的Options是一个泛型，可以传递任意类型，当然这个并不是重点，重点是unknown类型；

unknown类型是ts3.0新增的类型，它是任意类型的子类型，但是没有任何类型是unknown的子类型，也就是说unknown类型不能赋值给其他类型，除非是any类型；

上面说的太官方了，其实直接将unknown类型理解为any类型就可以了，不同于any类型可以直接使用，unknown类型必须先进行类型断言，才能使用：

const value: unknown = 123;

const num: number = value; // 报错，不能将 unknown 类型赋值给 number 类型
console.log(value + 1); // 报错，不能将 unknown 类型的值进行数学运算

if (typeof value === 'number') {
    const num: number = value; // 正确，先进行类型断言，才能使用
    console.log(value + 1); // 正确，先进行类型断言，才能使用
}

// 还有其他的情况，这里只是举个例子

可以看到这里说的类型断言就是使用js中的typeof来判断类型，unknown类型的值就可以正常使用了；

其实在PluginInstallFunction这个类型定义中，extends unknown[]也是一个类型断言，这里的断言就是判断Options是否是一个数组，如果是数组，转换成js的写法如下：

function PluginInstallFunction(Options) {
    if (Array.isArray(Options)) {
        return function (app, ...options) {
            // ...
        }
    } else {
        return function (app, options) {
            // ...
        }
    }
}

这里弄清楚了之后就可以看Plugin的类型定义了：

type Plugin<Options = any[]> =
    | (PluginInstallFunction<Options> & {
    install?: PluginInstallFunction<Options>
})
    | {
    install: PluginInstallFunction<Options>
}

Plugin是一个联合类型，里面就使用了PluginInstallFunction这个类型；

可以看到的是Plugin的泛型是有默认值的，这个默认值就是any[]，并且这个泛型的值会传递给PluginInstallFunction；

所以默认情况下，Plugin的类型是这样的：

type Plugin = 
    | (
        PluginInstallFunction<any[]>
        & { install?: PluginInstallFunction<any[]> }
      )
    | { 
        install: PluginInstallFunction<any[]> 
      }

这样看就很清楚了，Plugin的类型就是一个函数或者一个对象：

• 函数情况下，可以有install属性，也可以没有install属性；
• 对象情况下，必须有install属性；

Plugin的类型定义就是这样，接下来看看use方法的实现：

// 存放已经注册过的插件
const installedPlugins = new Set();

function use(plugin, ...options) {
    // 判断插件是否已经注册过
    if (installedPlugins.has(plugin)) {
        // 非生产环境下，会提示已经注册过
        (process.env.NODE_ENV !== 'production') && warn(`Plugin has already been applied to target app.`);
    }
    
    // 判断插件是有 install 属性
    else if (plugin && isFunction(plugin.install)) {
        // 将插件添加到 installedPlugins 中
        installedPlugins.add(plugin);
        // 调用插件的 install 方法
        plugin.install(app, ...options);
    }
    
    // 如果插件是一个函数，就直接调用
    else if (isFunction(plugin)) {
        // 将插件添加到 installedPlugins 中
        installedPlugins.add(plugin);
        // 这里是直接调用
        plugin(app, ...options);
    }
    
    // 如果不满足上面的条件，就会提示错误信息(非生产环境下会提示，后面不会在强调这个了)
    else if ((process.env.NODE_ENV !== 'production')) {
        warn(`A plugin must either be a function or an object with an "install" ` +
            `function.`);
    }
    
    // 返回 app 实例，方便链式调用
    return app;
}

use方法的实现相对来说会代码多一些，其实主要是在判断插件的类型；

这里的插件其实就是给开发者提供的一个扩展点，开发者可以在这里注册自己的插件，然后在插件中可以扩展vue的功能；

使用use方法注册插件的方式有两种：

// 方式一
const plugin = (app, options) => {
    // ...
};
app.use(plugin, options);

// 方式二
const plugin = {
    install(app, options) {
        // ...
    }
};
app.use(plugin);

// 同方式二
function plugin(app, options) {
    // ...
}
plugin.install = (app, options) => {
    // ...
}
app.use(plugin);

use方法就就到这里了，毕竟是源码解析，题外话不讲太多。

mixin

mixin方法是用来注册一个混入对象，这个混入对象会在作用与整个组件实例，官网的解释如下：

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。

注意：官网已经明确指示不再推荐使用mixin。

来看一下mixin的函数定义：

interface App {
    mixin(mixin: ComponentOptions): this
}

mixin方法的参数是一个ComponentOptions类型，这个其实就是一个组件的配置对象，这个配置对象会在作用与整个组件实例；

mixin方法的实现如下：

function mixin(mixin) {
    // 判断是否支持 Options API
    if (__VUE_OPTIONS_API__) {
        // 判断是否已经注册过
        if (!context.mixins.includes(mixin)) {
            // 将 mixin 添加到 context.mixins 中
            context.mixins.push(mixin);
        }
        
        // 已经注册过，提示错误信息
        else if ((process.env.NODE_ENV !== 'production')) {
            warn('Mixin has already been applied to target app' +
                (mixin.name ? `: ${mixin.name}` : ''));
        }
    }
    
    // 不支持 Options API 是不能使用 mixin 的
    else if ((process.env.NODE_ENV !== 'production')) {
        warn('Mixins are only available in builds supporting Options API');
    }
    
    // 返回 app 实例，方便链式调用
    return app;
}

mixin方法的实现也很简单，就是将mixin添加到context.mixins中，这里的context.mixins是一个数组，所以可以注册多个mixin；

值得注意的是，mixin方法只能在支持Options API的环境下使用，不支持Options API的环境下会提示错误信息；

开启Options API的方式也很简单，虽然是默认开启的，但是可以有配置开关：

截图文档地址：github.com/vuejs/core/…

实例属性

version

version属性是用来获取当前vue的版本号，官网的解释如下：

提供当前应用所使用的 Vue 版本号。这在插件中很有用，因为可能需要根据不同的 Vue 版本执行不同的逻辑。

这个其实没啥好说的，就是一个字符串，值就是当前vue的版本号，官网的介绍也说了在插件中很有用，这里就不多说了。

这里的源码也没必要看，是通过打包工具生成的，感兴趣可以看我的第一篇文章；

config

config属性是用来获取当前vue的配置，官网的解释如下：

每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性 (下面列举了每个属性的对应文档)。

而config属性的实现是通过get和set方法实现的：

const app = {
    // ...
    get config() {
        // 返回上下文的 config 属性
        return context.config;
    },
    set config(v) {
        // config 属性是只读的，不能被修改
        if ((process.env.NODE_ENV !== 'production')) {
            warn(`app.config cannot be replaced. Modify individual options instead.`);
        }
    }
    // ...
};

MDN get

MDN set

可以看到的是config属性指向的是上下文的config属性，并且config属性是只读的，不能被修改；`

config.errorHandler

config.errorHandler属性是用来获取当前vue的错误处理函数，官网的解释如下：

用于为应用内抛出的未捕获错误指定一个全局处理函数。

看一下errorHandler的定义：

interface AppConfig {
    errorHandler?: (
        err: unknown,
        instance: ComponentPublicInstance | null,
        // `info` 是一个 Vue 特定的错误信息
        // 例如：错误是在哪个生命周期的钩子上抛出的
        info: string
    ) => void
}

通过签名可以看出，errorHandler是一个函数，它有三个参数：

• err：错误对象
• instance：组件实例
• info：错误来源类型信息

注意：属性都没有实现，只是定义了类型，有调用时机，后面会慢慢分析。

config.warnHandler

config.warnHandler属性是用来获取当前vue的警告处理函数，官网的解释如下：

用于为 Vue 的运行时警告指定一个自定义处理函数。

看一下warnHandler的定义：

interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

通过签名可以看出，warnHandler是一个函数，它有三个参数：

• msg：警告信息
• instance：组件实例
• trace：错误堆栈

和errorHandler很类似，但是最后一个参数不一样，这个参数是错误堆栈，可以通过console.trace打印出来；

config.performance

config.performance属性是用来获取当前vue的性能监控开关，官网的解释如下：

设置此项为 true 可以在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅在开发模式和支持 performance.mark API 的浏览器中工作。

是一个布尔值，主要是做性能优化的，用来分析组件的初始化、编译、渲染和修补的性能表现，这个属性只在开发模式下有效；

config.compilerOptions

config.compilerOptions属性是用来开启运行时的编译器，官网的解释如下：

配置运行时编译器的选项。设置在此对象上的值将会在浏览器内进行模板编译时使用，并会影响到所配置应用的所有组件。另外你也可以通过 compilerOptions 选项在每个组件的基础上覆盖这些选项。

主要是针对模板编译的开启配置，例如有template属性的组件，会在浏览器内进行模板编译；

注意：开启这个属性会增加打包体积。

在 compilerOptions 配置属性中还有其他配置，因为本系列是源码分析系列，所以这里就不一一介绍了，感兴趣的可以看官网文档。

config.globalProperties

config.globalProperties属性是用来注册全局属性，官网的解释如下：

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

看一下globalProperties的定义：

interface AppConfig {
  globalProperties: Record<string, any>
}

通过签名可以看出，globalProperties是一个对象，它的属性会被注册到全局，可以被应用内所有组件实例访问到；

这个属性主要使用用来代替Vue2中的Vue.prototype，例如：

// Vue2
Vue.prototype.$message = function() {
    // ...
}

// Vue3
app.config.globalProperties.$message = function() {
    // ...
}

config.optionMergeStrategies

config.optionMergeStrategies属性是用来自定义合并策略，官网的解释如下：

一个用于定义自定义组件选项的合并策略的对象。

看一下optionMergeStrategies的定义：

interface AppConfig {
    optionMergeStrategies: Record<string, OptionMergeFunction>
}

type OptionMergeFunction = (to: unknown, from: unknown) => any

合并策略是用来合并组件的一些配置，例如data、computed、methods等，这个属性主要是用来自定义合并策略，例如：

合并策略是一个非常有趣的东西，它可以让我们自定义合并策略，例如：

const app = createApp({
    // option from self
    msg: 'Vue',
    // option from a mixin
    mixins: [
        {
            msg: 'Hello '
        }
    ],
    mounted() {
        // 在 this.$options 上暴露被合并的选项
        console.log(this.$options.msg)
    }
})

// 为  `msg` 定义一个合并策略函数
app.config.optionMergeStrategies.msg = (parent, child) => {
    return (parent || '') + (child || '')
}

app.mount('#app')
// 打印 'Hello Vue'

上面的代码是官网的示例，这里只是简单的介绍一下，具体的合并策略可以看官网文档。

总结

通过这次的分析，我们了解到了Vue3通过createApp返回的实例方法和示例属性，以及了解到这些方法和属性的作用;

而这些方法和属性都是只注册，并没有真正的调用，这很容易激发我们的好奇心，这些东西注册了，到底是什么时候调用的呢？

其实在Vue3中，还有很多API都是只注册，并没有真正的调用，后面我们将接着来分析这些只注册没有调用的API；

跟着我的节奏来，现在不会进入核心源码，先从熟悉Vue3的API开始，这样才能更好的理解核心源码，希望大家不要着急，慢慢来，一起学习，一起进步！

这次的分析就到这里，如果觉得好的话，希望大家可以点个赞支持一下，谢谢大家！