vue3和vue2定义全局变量

文章详细对比了Vue2和Vue3中创建应用的差异,Vue2中通过Vue.prototype来定义全局属性,如$openid,而Vue3则使用createApp并借助config.globalProperties来设置全局变量,如$mark_data。在使用时,均可以通过this.$访问这些变量。

vue2 定义

import App from './App.vue'

import Vue from 'vue'
Vue.prototype.$openid = "openid";
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

vue3 定义

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import webdata from "./assets/data.json" // 需要定义的变量,你可以用其他的,字符串啊,导入的函数等等的

const app = createApp(App)

// console.log(app)
// 定义变量 
app.config.globalProperties.$mark_data = webdata

// 需要最后才做渲染
app.mount('#app')

使用

因为我用的都是选项式api,所以都是使用this.$[你的变量命]使用。

在 uniapp 结合 Vue3 的项目中,有以下几种定义全局变量的方法: ### 使用 `app.config.globalProperties` 可以通过 `app.config.globalProperties` 来挂载全局变量方法。示例代码如下: ```javascript import { createSSRApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; export function createApp() { const app = createSSRApp(App) app.config.globalProperties.$testname = &#39;testtesta&#39; // 可以挂载方法 // app.config.globalProperties.$testf = testf() return { app } } ``` 在组件中使用时,可以通过 `getCurrentInstance` 来获取全局变量: ```vue <template> <view>{{ testname }}</view> </template> <script setup> import { getCurrentInstance } from &#39;vue&#39; const instance = getCurrentInstance() const testname = instance.appContext.config.globalProperties.$testname </script> ``` 这种方式适合挂载一些常用的工具方法或者变量,方便在各个组件中使用 [^4]。 ### 使用 `globalData` 在 `app.vue` 里定义 `globalData`,示例如下: ```javascript export default { globalData: { text: &#39;text&#39; }, methods: { doSomething() { console.log(&#39;do something&#39;) } } } ``` 在其他地方获取 `globalData`: ```javascript const app = getApp() console.log(app.globalData) app.doSomething() // 调用 App.vue methods 中的 doSomething 方法 ``` `globalData` 可以用来存储一些全局的状态信息,在不同页面之间共享数据 [^3]。 ### 结合业务场景定义全局变量 在 uniapp 项目中,当涉及到切换底部 tabbar 时根据条件刷新页面的场景,可以定义一个全局变量来控制是否需要更新数据。例如,在 `app.vue` 中定义一个全局变量: ```javascript export default { globalData: { needRefresh: false } } ``` 在 tabbar 页面中,可以根据 `needRefresh` 的值来决定是否更新数据: ```vue <template> <!-- 页面内容 --> </template> <script setup> import { onShow } from &#39;@dcloudio/uni-app&#39; const app = getApp() onShow(() => { if (app.globalData.needRefresh) { // 更新数据的逻辑 app.globalData.needRefresh = false } }) </script> ``` 这种方式可以避免在 `onshow` 生命周期里每次都调用异步请求更新数据,提高性能 [^2]。 ### 注意事项 在 `Vue.prototype` 上挂载属性或方法时,建议加一个统一的前缀,如 `$url`、`global_url` 等,以便在读代码时更容易识别,同时要注意不要页面的局部变量名称一致,避免出现冲突 [^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值