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

初窥

我们先来看看官网上的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<