都23年了你还记得渐进式框架是什么意思吗

vue

---

---

前言

渐进式框架是一种能够逐步增强应用功能的框架，它允许开发者在不影响应用性能的情况下，逐步添加新的功能和特性。Vue.js提供了一些基础功能，如数据绑定和组件化，然后可以通过添加插件和库来增强其功能。开发者可以根据需要选择使用Vue.js的不同部分，从而逐步增强应用程序的功能。

一、眼见为实举个栗子

先举两个官方的例子：
1、vue-router都熟悉吧，用法应该也很熟悉。
我们先看它是如何注册的：

import {
    
     createRouter, createWebHashHistory } from "vue-router";
import routes from "@/router";
const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes,
});
const app = createApp(App);
app.use(router);

再来看看源码：

2、vuex也熟悉的用法。
看看它是怎么注册的：

import store from "./store";
const app = createApp(App);
app.use(store);

再来看看源码：

可以看到一个共同的特点，就是使用的时候都是用use注册，并且源码内部都实现了，install方法。
那么这种使用方式就是vue渐进式的特点，就是通过注册的插件的方式扩展，vue的功能，当然如果你不需要这些插件你可以不用，这样可以使你的vue项目可大可小。很灵活。
3、当然这也给我们提供了很好的自定义扩展的便捷。
通过自己编写插件，扩展业务能力。例如：
我这里准备了一个通过插件实现用户埋点行为记录的功能。

插件

import {
    
     App } from "vue";
import axios from "axios"
export default {
    
    
  install: (app: App) => {
    
    
    console.log(app);
    const eventList = {
    
    
      pageName: "",
    };
    app.config.globalProperties.$eventPost = (data: any) => {
    
    
      eventList.pageName = data.pageName;
      axios.post(url, eventList);
    };
  },
};

用法

<script lang="ts" setup>
import {
    
     onMounted, getCurrentInstance } from "vue";
onMounted(() => {
    
    
  // 计算页面渲染时间
  const pageLoadTime =
    window.performance.timing.domContentLoadedEventEnd -
    window.performance.timing.navigationStart;
  getCurrentInstance()?.appContext.config.globalProperties.$eventPost({
    
    
    pageName: pageLoadTime,
  });
});
</script>

功能很简单，还有代码里面还有可优化的地方，感兴趣的小伙伴可以自己去优化，例如，全局注册eventPost方法，不用这么麻烦获取。
还有在插件内直接调用接口，可以抽离出来封装，只返回收集好的数据。

二、渐进式的优势

1. 可以逐步引入：Vue框架可以逐步引入到项目中，可以先使用Vue的一部分功能，再逐步引入其他功能，这样可以避免一次性引入过多的功能，导致项目变得复杂和难以维护。

2. 可以根据需求选择功能：Vue框架提供了很多功能和插件，可以根据项目需求选择需要的功能和插件，这样可以避免不必要的代码和功能，提高开发效率和项目的可维护性。

---

如有问题欢迎指出—