关于Vue.prototype

经常看到main.js,使用了import引入，还Vue.prototype.$..

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

1.那么Vue.prototype.$..是干嘛的？

• 对于一个vue脚手架项目来说，在main.js里使用Vue.prototype声明的变量，实际上是为Vue对象添加了一个原型属性，而不是一个全局变量。但是如果这个原型属性的值是引用类型的，我们就可以借此实现全局变量

如果需要设置全局变量，在main.js中，Vue实例化的代码里添加。

不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

Vue.prototype.$echarts = echarts

这样 $echarts 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。

2.“为什么 echarts 要以 $ 开头？”

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

可以根据你的喜好使用自己的约定，比如 $_echarts 或 &echarts ，来避免和插件或未来的插件相冲突。

3.何来冲突？

main.js

使用它的vue页面打印结果

console.log(this.name); //My name is Yuki

但是： 如果这个页面也有name变量

给个钩子测试

先打印 “My name is Yuki”，然后打印 “我whowho”，因为 this.name在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。

加上$

Vue.prototype.$name = 'My name is Yuki';