关于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';

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/Dear_Yuki/article/details/94452513
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-22 13:56:36
阅读 ( 648 )
分类：前端

关于Vue.prototype

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看