Vue3源码解析（三）

一、全局 API 与内部模块交互

createApp 的实现细节
- createApp 是 Vue3 中创建应用实例的入口函数。其源码实现大致如下：

export function createApp(rootComponent, rootProps = null) {
    const app = {
        _component: rootComponent,
        _props: rootProps,
        use(plugin) {
            // 处理插件安装逻辑
            if (Array.isArray(plugin)) {
                plugin.forEach(p => this.use(p));
            } else {
                plugin.install? plugin.install(this) : plugin(this);
            }
            return this;
        },
        mount(target) {
            const vnode = createVNode(rootComponent, rootProps);
            return patch(null, vnode, document.querySelector(target));
        }
    };
    return app;
}

createApp 函数返回一个包含 use 和 mount 等方法的应用实例对象。use 方法用于安装插件，它会检查插件是否有 install 方法，如果有则调用 plugin.install(this)，否则直接调用 plugin(this)。mount 方法先通过 createVNode 创建根组件的虚拟节点，然后使用 patch 函数将虚拟节点挂载到指定的 DOM 目标上。

插件系统的工作原理
- 插件在 Vue3 中是一种扩展应用功能的方式。以 Vue Router 为例，其安装过程如下：

const routerPlugin = {
    install(app) {
        // 初始化路由相关逻辑
        const router = createRouter({
            // 路由配置
        });
        app._router = router;
        // 添加全局混入，使得组件可以访问 $router 和 $route
        app.mixin({
            beforeCreate() {
                if (this.$options.router) {
                    this._router = this.$options.router;
                    this._router.init(this);
                    Vue.util.defineReactive(this, '$router', this._router);
                    Vue.util.defineReactive(this, '$route', this._router.currentRoute);
                }
            }
        });
    }
};

插件通过 install 方法接收 app 实例，在 install 方法中可以进行各种全局配置，如定义全局组件、指令，混入全局逻辑等。通过这种方式，插件可以扩展 Vue 应用的功能，同时保持良好的封装性和可复用性。

二、依赖注入（Provide / Inject）

provide 和 inject 的底层实现
- 在 Vue3 中，provide 和 inject 用于实现跨层级组件通信。provide 函数用于在父组件中提供数据，inject 函数用于在子组件中注入数据。
- 从源码角度看，provide 函数会将数据存储在当前组件实例的 provides 对象中，并且会将这个 provides 对象传递给所有子组件。例如：

import { provide } from 'vue';

export default {
    setup() {
        const dataToProvide = 'Hello from parent';
        provide('key', dataToProvide);
    }
};

inject 函数在子组件中会查找父组件传递下来的 provides 对象，并从中获取对应 key 的数据。例如：

import { inject } from 'vue';

export default {
    setup() {
        const injectedData = inject('key');
        return { injectedData };
    }
};

这种机制基于组件树的父子关系，通过原型链查找来实现数据的传递，使得深层嵌套的子组件可以方便地获取到父组件提供的数据，而无需通过多层 props 传递。

响应式依赖注入
- 如果 provide 的数据是响应式的（如通过 reactive 或 ref 创建），那么 inject 得到的数据也是响应式的。这是因为 inject 内部会对获取到的数据进行响应式处理（如果需要）。例如：

import { provide, reactive } from 'vue';

export default {
    setup() {
        const reactiveData = reactive({ message: 'Initial message' });
        provide('reactiveKey', reactiveData);
    }
};

// 子组件
import { inject } from 'vue';

export default {
    setup() {
        const injectedReactiveData = inject('reactiveKey');
        return { injectedReactiveData };
    }
};

当父组件中 reactiveData 的 message 属性发生变化时，子组件中通过 inject 获取到的 injectedReactiveData.message 也会相应变化，并且会触发子组件的重新渲染（如果在模板中使用了该数据）。

三、过渡与动画

过渡组件的编译与渲染
- Vue3 中的过渡组件（如 <transition> 和 <transition - group>）在编译阶段会被特殊处理。以 <transition> 为例，编译时会生成特定的代码来处理过渡的各个阶段（进入、离开等）。
- 当组件进入过渡时，会添加进入过渡的类名（如 v - enter - from、v - enter - active），并在适当的时机移除这些类名。在离开过渡时，会添加离开过渡的类名（如 v - leave - from、v - leave - active）。例如：

<transition name="fade">
    <div v - if="isVisible">Content</div>
</transition>

编译后会生成类似如下代码来处理过渡效果：

function render() {
    if (this.isVisible) {
        return h('transition', { name: 'fade' }, [
            h('div', null, 'Content')
        ]);
    }
    return null;
}

运行时，Vue 会根据过渡的状态（进入、离开等）动态添加和移除对应的 CSS 类，结合 CSS 过渡或动画规则，实现过渡效果。

过渡钩子函数的实现
- <transition> 组件支持自定义过渡钩子函数，如 before - enter、enter、after - enter 等。在源码中，这些钩子函数会在适当的时机被调用。例如，enter 钩子函数会在元素插入 DOM 后，过渡动画开始之前调用。
- 这些钩子函数可以通过 JavaScript 来控制过渡的行为，例如在 enter 钩子函数中可以手动触发动画，或者在 after - enter 钩子函数中执行一些过渡完成后的逻辑。例如：

<transition
    @before - enter="beforeEnter"
    @enter="enter"
    @after - enter="afterEnter"
>
    <div v - if="isVisible">Content</div>
</transition>

export default {
    methods: {
        beforeEnter(el) {
            // 元素进入过渡前的操作
        },
        enter(el, done) {
            // 元素进入过渡时的操作，done 用于通知过渡完成
            // 例如设置动画，然后在动画结束时调用 done()
        },
        afterEnter(el) {
            // 元素进入过渡完成后的操作
        }
    }
};

通过对这些方面的源码解析，我们进一步深入了解了 Vue3 在全局 API、依赖注入以及过渡动画等方面的工作机制，有助于开发者更好地利用这些特性进行复杂应用的开发。

文章版权归作者所有，未经允许请勿转载。

THE END