Vue.prototype详解

时间:2021-07-21
本文章向大家介绍Vue.prototype详解,主要包括Vue.prototype详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

参考地址:Vue.prototype详解

如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加。

不想污染全局作用域。这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可用。

1
Vue.prototype.$http = axios;

  这样 $http 就在所有Vue实例中可用了,甚至在实例被创建之前就可以用。 如果我们运行:

1
2
3
4
5
new Vue({
    beforeCreate: function() {
        console.log(this.$http)
    }
});

  则控制台会打印出

  你可能会好奇:

  “为什么 http 要以 $ 开头? 这很重要吗? 他会怎样?”

  这里没有什么魔法。$ 是在Vue 所有实例中都可用的属性 的一个简单约定。这样做会避免与已被定义的数据、方法、计算属性产生冲突。

  “你指的冲突是什么意思?”

  另一个好问题!如果你写成:

1
Vue.prototype.http = axios

  那么你希望下面的代码输出什么呢?

1
2
3
4
5
6
7
8
9
10
11
new Vue({
    data: {
        http: '123456'
    },
    beforeCreate: function() {
        console.log(this.http)
    },
    created: function() {
        console.log(this.http)
    }
});

  日志中会先出现

,然后出现'123456',因此 this.http 在实例创建之后被data覆写了。我们通过 $ 为实例属性设置 作用域 避免这种事情发生。你可以根据你的喜好使用自己的约定,诸如 $_http 或 Ωhttp,来避免和插件或未来的插件相冲突。

原文地址:https://www.cnblogs.com/ldywebhome/p/15040105.html