Vue怎样通过Vue.prototype定义原型属性实现全局变量

目次

• Vue通过Vue.prototype定义原型属性实现全局变量
• 这种情况下
• 假如我们运行下述代码
• 假如我们在main.js中通过如下方式定义原型属性
• 控制台日记中会先出现 “My App”
• 总结

Vue通过Vue.prototype定义原型属性实现全局变量

假如需要设置全局变量，但不想污染全局作用域。

这种情况下

可以通过在main.js中，Vue实例化的代码里通过添加了原型属性实现全局变量，使其在每个 Vue 的实例中可用。

这样 $ appName 就在全部的 Vue 实例中可用了，以致在实例被创建之前就可以。

假如我们运行下述代码

则控制台会打印出 My App。

• 提问：上述代码中，为什么 appName 要以 $ 开头呢？
• 回答：$ 是在 Vue 全部实例中都可用的属性的一个简朴约定。这样做会避免和已被定义的数据、方法、盘算属性产生冲突。

假如我们在main.js中通过如下方式定义原型属性

运行下述代码，则控制台会打印什么呢？

控制台日记中会先出现 “My App”

然后出现 “The name of some other app”

由于 this.appName 在实例被创建之后被 data 覆写了

我们通过 $ 为实例属性设置作用域来避免这种事情发生。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。