vue2 vs vue3 --可访问的全局属性对象(vue2通过vue.property原型链\ vue3通过app.config.globalProperties）

最新推荐文章于 2026-06-20 10:45:32 发布

原创最新推荐文章于 2026-06-20 10:45:32 发布 · 995 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue2 && vue3 专栏收录该内容

7 篇文章

订阅专栏

本文比较了Vue2中通过Vue.prototype设置实例属性与Vue3中使用app.config.globalProperties的方法，强调了为实例属性设置$开头作用域的重要性，以及两者在全局属性优先级上的差异。

在这里插入图片描述

前言

有时候遇到一些面试官，他会问Vue3如何获取当前实例。其实一开始听这句话是有歧义的，因为不知道面试官说的是根实例还是组件的实例。所以我们一般可以反问一下~

组件内的实例（Vue2 和 Vue3无关）：

选项式api，直接用this就可以直接访问了；
组合式api，都不用this，直接就可以访问了。

本文主要是讲解Vue2，Vue3获取当前根实例的公共属性以及方法的区别。

Vue2

1. 基本的示例

你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

Vue.prototype.$appName = 'My App'

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行：

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

则控制台会打印出 My App。就这么简单！

2. 为实例 property 设置作用域的重要性

你可能会好奇：

“为什么 appName 要以 $ 开头？这很重要吗？它会怎样？”

这里没有什么魔法。$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

“你指的冲突是什么意思？”

另一个好问题！如果你写成：

Vue.prototype.appName = 'My App'

那么你希望下面的代码输出什么呢？

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例 property 名！😯
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 “My App”，然后出现 “The name of some other app”，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。

3. 官方链接

更多请查看链接： 此处

Vue3

1. app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

2. 详细信息

这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。

如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

3. 用法

app.config.globalProperties.msg = 'hello'

这使得 msg 在应用的任意组件模板上都可用，并且也可以通过任意组件实例的 this 访问到：

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

4. 官方链接

更多请查看链接： 此处

可浏览博客主页的Vue2 vs Vue3专栏，会陆续添加相关文章，有问题或者可以优化的地方也希望大大门告知
共同进步：）