Vue.js - 通过 Vue.prototype 定义原型属性实现全局变量_vue.prototype定义全局变量在js中如何使用-CSDN博客

文章讲述了如何在Vue中通过Vue.prototype设置全局变量$appName以避免污染全局作用域，并解释了为什么要以$开头。同时，通过实例代码展示了如何处理原型属性与data中同名属性的冲突问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果需要设置全局变量，但不想污染全局作用域。这种情况下，可以通过在main.js中，Vue实例化的代码里通过添加了原型属性实现全局变量，使其在每个 Vue 的实例中可用。

Vue.prototype.$appName = 'My App'

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行下述代码，则控制台会打印出 My App

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

提问：上述代码中，为什么 appName 要以 $ 开头呢？
回答：$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

假如我们在main.js中通过如下方式定义原型属性，运行下述代码，则控制台会打印什么呢？

Vue.prototype.appName = 'My App'
new Vue({ 
  data: { 
    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 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。