当前位置: 首页 > article >正文

都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方法,不用这么麻烦获取。
还有在插件内直接调用接口,可以抽离出来封装,只返回收集好的数据。

二、渐进式的优势

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

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


如有问题欢迎指出—


http://www.kler.cn/a/17261.html

相关文章:

  • JavaScript 正则表达式详解
  • VBA08-if语句
  • DimensionX:从单张图片生成高度逼真的 3D 和 4D 场景
  • QML项目实战:自定义CheckBox
  • 各种环境换源教程
  • 打造个性化时钟应用:结合视觉与听觉的创新实践
  • 国民技术N32G430开发笔记(18)- I2C1 从机收发数据
  • 【react全家桶学习】react组件中的ref属性(详)
  • K8S之HPA自动扩缩容机制
  • 【五一创作】QML、Qt Quick /Qt中绘制圆形
  • 第四章 数据关联分析方法
  • C/C++每日一练(20230504)
  • [Leetcode] 0697.数组的度
  • api 和 implementation 区别
  • 最大和+翻硬币(蓝桥杯JAVA解法)
  • 【python】创建python包
  • 浅谈MySQL索引以及执行计划
  • 自定义类型:结构体
  • Windeployqt 打包,缺少DLL 的原因分析,解决方法
  • 【网络】网络基础入门
  • Bean的作用域和生命周期
  • Splunk 转移数据之collect 命令
  • 功能齐全的 DIY ESP32 智能手表设计之PCB介绍
  • 一篇带你快速入门DDD领域驱动设计
  • 【JavaEE初阶】简单了解wait和notify方法~
  • MySQL 精选 35 道面试题大厂稳了(含答案)