Vue.prototype的使用

转载自 https://blog.csdn.net/u010243266/article/details/84578780

1.JS中原型对象prototype

还记得prototype是什么吗？
在构造函数new对象的时候，告诉构造函数新创建的对象的原型是谁。
我们将对象简单的分成了两类：

• 函数对象
• 普通对象
  普通对象都是通过函数创建的，
  每一个函数对象都有一个prototype属性，但是普通对象是没有的。

2. Vue中的prototype

我们今天重点要说的就是prototype在vue中的应用
通过vue-cli3.x搭建了一个项目，毕竟vue不是js原生代码，我们得先通过代码了解一下vue在main.js入口文件中

import Vue from 'vue'
//无关代码省略
console.log(Vue)
//无关代码省略

我们观察输出

//控制台输出如下
ƒ Vue (options) {
  if ( true &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

提示我们Vue是一个构造函数，必须使用new关键字进行实例化，好吧我们再来一次

import Vue from 'vue'
//无关代码省略
var vm = new Vue()
console.log(vm)//输出一个对象（对象很大，就不贴了）
//无关代码省略

也就是Vue这个构造函数经过实例化后，得到一个对象（好像是废话），构造函数是有prototype的，对吧
我们看一下

var vm = new Vue()
//Vue 存在原型
console.log(Vue.prototype);
//普通对象的__proto__指向当前函数对象的原型
console.log(vm.__proto__===Vue.prototype)

js通过原型链可以实现继承那么我们可以对Vue.prototype进行操作，对Vue.prototype添加属性或者方法，所有通过new Vue创建的实例都可以继承这些属性或方法，例如我们在main.js 中添加如下代码：

//无关代码省略
Vue.prototype.myName="陌上寒"
//无关代码省略

我们通过路由配置了两个页面（vue-cli默认自带的）Home和About，我们分别打印

//我们分别在两个页面中添加如下代码
  created() {
    console.log(this.myName);//陌上寒
  }

Home 页面和About页面分别打印出了 陌上寒，这个不意外，我们再做一下改动
Home.vue代码如下：

//我们分别在两个页面中添加如下代码
created() {
	console.log(this.myName);//陌上寒
	this.myName="陌二哥"//重新赋值
	console.log(this.myName);//陌二哥
}

继续，About.vue代码如下

//我们分别在两个页面中添加如下代码
created() {
	console.log(this.myName);//陌上寒
}

我们看到了，在Home页面对myName进行了重新赋值，当页面从Home跳转到About后，myName并没有更新，这是怎么回事呢？

3.原型赋值与全局变量

原型赋值和全局变量不是一回事。要区别开来
因为每一次跳转到新的Vue页面，都是一个独立的Vue实例，实例中this.myName从Vue.prototype.myName而来，所以仍然是“陌上寒”。
也就是说Home.vue和About.vue都从Vue.prototype那继承一些属性和方法，继承后，各自想怎么玩怎么玩，但是不能相互影响，设想一些，如果可以随便改变继承源头的属性和方法，岂不是要乱套了？（类似于子组件不能修改父组件的值，他们是一个道理）
那么我就是想在vue中使用全局变量，怎么办呢？这个不是我们今天要讨论的主题，不过我们可以简单的说一下

4.vue中使用全局对象

如果你用过vue的bus，你就一定会添加全局变量了，当然，在vue中添加全局变量的方法不唯一，我们只介绍这一种
在main.js中

//省略无关代码
new Vue({
  router,
  store,
  data() {
    return {
      website: "https://www.qdtalk.com",
    }
  },
  render: h => h(App)
}).$mount('#app')

在其他页面中就可以使用this.$root.website进行读写操作了，

this.$root.website="陌上寒个人博客"
console.log(this.$root.website)