vue3的Global API 改为应用程序实例调用以及可做摇树优化

最新推荐文章于 2025-04-27 10:11:33 发布

原创

最新推荐文章于 2025-04-27 10:11:33 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Global API

vue2中有很多全局api可以改变vue的行为，比如Vue.component等。这导致一些问题：

vue2没有app概念，new Vue()得到的根实例被作为app，这样的话所有创建的根实例是共享相同的全局配置，这在测试时会污染其他测试用例，导致测试变得困难。

全局配置也导致没有办法在单页面创建不同全局配置的多个app实例。

vue3中使用createApp返回app实例，由它暴露一系列全局api。

//默认初始化的情况是这样的
import {
   
    createApp } from 'vue'
const app = createApp().mount('#app'

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

拾玥花开

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3.0之Global API Change-全局API修改

weixin_42555053的博客

04-10

538

vue3入口文件，采用api为createApp，然后把创建出来的对象mount到Dom节点上 vue2的写法：从vue导出了一个全局的对象，然后在上面进行了一系列的配置，比如use、mixin等一系列方法，然后再新建vue的实例，调用$mount方法挂载到Dom节点，我们发现vue2的全局配置在一定程度上修改了vue对象一系列的属性或者说是全局状态，这些操作都是对vue对象操作的，在一定程度上会有一些问题问题一：在单元测试中，全局配置非常容易污染全局环境。问题二：在不同的apps中，共享一份有不同

vue3.0 Global API & Composition API

weixin_49417749的博客

03-01

578

import Vue from 'vue' Vue.nextTick(() => {}) const obj = Vue.observable({}) Vue 3.0 在平衡功能和包体积大小做了一定的努力，力图在 Vue 包做到更新并且不限制其功能。Vue 3.0 中使用了组合式 API，通过 ES Modules 的静态分析的设计，与现代的捆绑器 webpack 和 rollup 相结合，Tree-shaking 中剔除了那些未在项目使用却导出 ES Module API，如此，用户只会使

2 条评论您还未登录，请先登录后发表或查看评论

vue3之vite创建H5项目之4 （自动导入api、按需引入van）

weixin_47409897的博客

05-06

1250

在src下生成以下文件使用简化了 api导入 1-2 生成全局声明文件 1-2-1 vite.config.ts 配置 1-2-2 eslintrc.cjs | .js 1-2-3 vue-global-api 在页面没有引入的情况下，使用unplugin-auto-import/vite来自动引入hooks，在项目中肯定会报错的，这时候需要在eslintrc.js中的extends引入vue-global-api，这个插件是vue3hooks的,其他自己找找，找不到的话可以手动配置一下

Vue3 里 CSS 深度作用选择器 :global

热门推荐

时光隧道

08-23

5万+

在Vue.js的世界里，组件是构建现代前端应用的基石。它们不仅使代码结构更加清晰，也为开发者提供了灵活的复用性和可维护性。而理解组件的属性和方法，是掌握Vue开发的关键一步。在本篇文章中，我们将深入探讨Vue组件中的属性和方法的基础知识。您将学习到如何定义和使用组件的props、data、computed和methods等重要特性，了解它们在组件中的作用和最佳实践。通过具体的实例，我们会逐步解析每个概念，帮助您在实际开发中更有效地管理组件间的数据流和交互。

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》017-事件的监听与处理

时光隧道

11-06

4万+

在现代前端开发中，事件处理是用户交互体验的重要组成部分。随着 Vue 3 的推出，许多开发者开始探索其全新的特性和更高效的事件处理机制。本篇文章将深入探讨 Vue 3 中事件的监听与处理，帮助你更好地理解如何在组件中响应用户的操作。Vue 3 通过组合式 API 和更灵活的事件处理机制，使得事件监听变得更加简单和可维护。在这篇文章中，我们将介绍 Vue 3 中的事件绑定、事件修饰符、事件处理函数的使用，以及如何通过组合式 API 来管理复杂的事件逻辑。@click绑定点击事件。通过capture和。

vue3详细介绍

javajy的博客

09-03

670

ant-design-vue (opens new window)Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发。element-plus (opens new window)基于 Vue 3.0 的桌面端组件库。现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。3、Suspense - 异步加载组件的loading界面。2、Teleport - 瞬移组件的位置。2、将原来的全局API转移到应用对象。3、新的生命周期函数。

前端框架vue3的js--vue.global.js

12-16

前端框架vue3的js--vue.global.js

Vue 3如何进行样式Scoped和Global的设置？

有我更精彩的博客

01-08

1462

Scoped 样式：Scoped 样式是特定于某个组件的样式，只在该组件内生效。这意味着如果你在一个组件中定义了 scoped 样式，它们不会影响到其他组件。这种方式可以有效避免样式冲突。Global 样式：Global 样式是全局有效的，无论在哪里都能生效。这种方式适合于那些需要在多个组件间共享的样式。在 Vue 3 中，有效地运用 scoped 和 global 样式能够增强我们的应用结构，避免CSS冲突，使得样式的管理更加清晰。通过掌握它们的使用方法，我们可以轻松地构建出更具维护性和扩展性的前端项目。

Vue3新增特性之全局config.globalProperties和Teleport内置组件

weixin_45092437的博客

01-27

4435

1、在Vue3中，通过`createApp()`方法创造的应用实例会暴露一个 `config` 对象允许我们配置一些应用级的选项，例如全局变量。2、Teleport是 Vue 3 的新增的内置组件，用于将组件内的子节点传输/移动到整个页面 DOM 树的其他DOM节点下。其接收一个 to属性来指定传送的目标。to属性的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

Vue3 中几种独有的选择器深度选择器:deep()、插槽选择器:slotted()、全局选择器 :global()

码农键盘上的梦

12-01

3087

在Vue中，除了常见的CSS选择器外，还有一些独有的选择器，这些选择器可以更方便地操作Vue组件。

Vue2 源码解读一：Global API

Vincent的博客

08-04

1261

文章目录Vue源码解读一：源码准备1、准备源码，添加调试2、Flow静态类型检查3、目录说明[Vue源码解读一：Global API](https://fanyi.baidu.com/#auto/zh/) Vue源码解读一：源码准备 1、准备源码，添加调试下载Vue源码 Vue Release ；安装依赖cnpm install，使用cnpm安装修改package.json中的scripts，dev脚本添加--sourcemap，改为"dev": "rollup -w -c scripts/conf

Vue3组件开发-GlobalHeader

qq_46258465的博客

01-13

840

这个组件比上面一个组件简单多了，但是我在写的时候还是遇到了奇奇怪怪的问题。 1 环境主要用到的环境是VScode+TS+VUE3+Bootstrap 这个就是一个brandbar，头部导航条，逻辑方面就是判断是否登录，如果登录了那么就显示XXX欢迎，如果是未登录那么就是，登录以及注册的按钮跳转。 2 代码 2.1 GlobalHeader组件：代码： //创建一个globalheader组件 <template> <nav class="navbar navbar-dark b

【vue】vue全局api

Meditation_Crazy

07-02

511

文章目录全局api的实现方式实现步骤示例全局api的实现方式实现步骤首先，添加api-payForVerification.js import { postService } from '../../service/axiosset' import { urls } from '../urls' /** * 详情 * @param {*} param */ export function detail(param) { return postService(urls.payForVerif

在vue3使用::v-global改变组件的css属性后却无法获取js变量

yuan0209的博客

02-18

169

在vue3使用::v-global改变组件的css属性后却无法获取js变量去动态改变穿透后的属性样式

vue2源码分析-vue入口文件global-api分析

qq_42389674的博客

03-06

743

vue 全局api初始化 vue挂载的全局属性: vue.util 公共方法,set 方法 ,del方法, nextTick方法,observable observe方法,options vue的一些选项。初始化方法: extend,extend函数此处用于扩展,initUse 初始化插件,initMixin 初始化混入,initExtend,构造一个vue的子类 ,initAssetRegisters(Vue) 注册或者获取全局组件、指令、过滤器

vue3中全局变量可修改

03-26