都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>
功能很简单,还有代码里面还有可优化的地方,感兴趣的小伙伴可以自己去优化,例如,全局注册eventPost方法,不用这么麻烦获取。
还有在插件内直接调用接口,可以抽离出来封装,只返回收集好的数据。
二、渐进式的优势
-
可以逐步引入:Vue框架可以逐步引入到项目中,可以先使用Vue的一部分功能,再逐步引入其他功能,这样可以避免一次性引入过多的功能,导致项目变得复杂和难以维护。
-
可以根据需求选择功能:Vue框架提供了很多功能和插件,可以根据项目需求选择需要的功能和插件,这样可以避免不必要的代码和功能,提高开发效率和项目的可维护性。
如有问题欢迎指出—