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

vue

文章目录

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>