Vue.prototype.$echarts究竟什么意思?$echarts加上这个$又是什么意思呢?如何定义全局唯一变量?(前端必知)
你可能会在很多组件里用到数据/实用工具(例如这个$appName),但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = ‘My App’这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:new Vue({beforeCreate: function ()
你可能会在很多组件里用到数据/实用工具(例如这个$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”
其实整篇内容,都是在说:定义一个全局的变量,然后页面如何使用,并且如何唯一(不和页面冲突)
以上纯属个人理解,如果有不对的地方,欢迎评论区留言。其实最后一句话才是我想说的,我称之为全篇经典。
更多推荐
所有评论(0)