Vue.prototype.$echarts究竟什么意思？$echarts加上这个$又是什么意思呢？如何定义全局唯一变量？（前端必知）

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

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

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

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

其实白话就是：把appName属性全局化了。我可以在页面上通过this去调用它出来。

我猜大家肯定很想知道，为什么appName前面要加上一个$，其实它这样做是怕页面上也有一样的appName。

官方解释如下：

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

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

假如你非要命名为这个Vue.prototype.appName = ‘我是Main.js里面的appName’
那么你希望下面这串代码运行出什么呢？（如果你说你页面一定不会命名一样的，那就当我没说，你爱咋地咋地，$加上这个也是为了防止冲突）

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例 property 名！这下本页面也有，全局也有了哦，该咋办？
    appName: '我是hello页面的内容'
  },
  beforeCreate(){
    console.log('创建之前所以this.appName是',this.appName)
  },
  created() {
    console.log('所以this.appName是',this.appName)
  }
})

日志中会先出现 “创建之前所以this.appName是 我是Main.js里面的appName”，然后出现 “所以this.appName是 我是hello页面的内容”，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例 property 设置作用域来避免这种事情发生。

重点来啦：您还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。Vue.prototype.ΩappName=“我是Main.js里面的appName”

其实整篇内容，都是在说：定义一个全局的变量，然后页面如何使用，并且如何唯一（不和页面冲突）

以上纯属个人理解，如果有不对的地方，欢迎评论区留言。其实最后一句话才是我想说的，我称之为全篇经典。