我要评论vue通过vue.prototype定义原型属性实现全局变量
如果需要设置全局变量，但不想污染全局作用域。
这种情况下
可以通过在main.js中，vue实例化的代码里通过添加了原型属性实现全局变量，使其在每个 vue 的实例中可用。
vue.prototype.$appname = 'my app'
这样 $ appname 就在所有的 vue 实例中可用了，甚至在实例被创建之前就可以。
如果我们运行下述代码
则控制台会打印出 my app。
new vue({
beforecreate: function () {
console.log(this.$appname)
}
})- 提问：上述代码中，为什么 appname 要以 $ 开头呢？
- 回答：$ 是在 vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
假如我们在main.js中通过如下方式定义原型属性
运行下述代码，则控制台会打印什么呢？
vue.prototype.appname = 'my app'
new vue({
data: {
appname: 'the name of some other app'
},
beforecreate: function () {
//父类中的属性
console.log(this.appname)
},
created: function () {
//子类重写的属性
console.log(this.appname)
}
})控制台日志中会先出现 “my app”
然后出现 “the name of some other app”
因为 this.appname 在实例被创建之后被 data 覆写了
我们通过 $ 为实例属性设置作用域来避免这种事情发生。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论