你可能会在很多组件里用到数据/实用工具(例如这个$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”

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

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

Logo

前往低代码交流专区

更多推荐