全局变量的定义（三种）、原型链与原型对象、Vue.prototype和Vue.use()定义使用插件

一、Vue.prototype

1.1、prototype是什么

• 它是函数所独有的，它是从一个函数指向一个对象。
• 即函数的原型对象，也就是与对象的原型链__proto__对应。
• 任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

function Foo() {}//函数
let f1 = new Foo() //对象指向函数

prototype属性它的作用：就是当访问一个对象的属性时，如果该对象内部不存在这个属性，就会一直向父、祖先级寻找，直到原型链顶端null

1.2、定义常量（全局变量）

1. 在main.js中使用Vue.prototype定义变量是为添加了一个原型属性，但如果是常量为引用数据类型(class，array)，则可以实现全局变量

Vue.prototype.name = ‘张三’
Vue.prototype.$myName= ‘李四’

name和$myName的区别：
在于 name可以被data(){return{……}}修改。
而$myName不可以， $作为vue中的一个简单约定，用于避免和已被定义的数据、方法、计算属性产生冲突。
所以在不想污染全局作用域时，尽量给变量$或其他标识符区别开来

• 除次之外，还分为基本数据类型（boolean，number，string，null，undefined）和引用数据类型(class，array)的情况

当定义为基本数据类型时，在一个组件控制该全局变量变化时，其他调用的该全局变量不会改变。此时为全局常量

当定义为Vue.prototype.global={name:'张三'}，控制变化时，全局都会改变

2. 全局变量的定义还可以通过在main.js中new Vue

new Vue({
  ……
  data(){
      return{
          name: '张三'
      }
  }
})

然后就可以在组件中通过this.$root.name来访问根实例中的数据

3. 通过vuex定义全局变量

在state中定义data，可以通过this.$store.state访问

1.3、Vue.prototype定义插件

• 当在main.js中定义以下$就可以在组件内部直接调用this.$message()了

函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Vue.prototype.$axios = axios;

二、Vue.use()

Vue.use()就是运行插件对象必备的install()函数方法，
初始化插件对象需要通过Vue.use().

1. Vue.use()调用必须在new Vue之前.
2. 同一个插件多次使用Vue.use()也只会被运行一次.

import dicts from './dicts'

Vue.use(dicts);

dict.js

import Vue from 'vue';
class Dicts {
		constructor(dicts, dictmaps) {
        this.dicts = dicts;
        this.dictmaps = dictmaps;
    }
}

const install = function (Vue) {
    Vue.mixin({
        data () {
            if (
                this.$options.fields instanceof Array &&
                this.$options.fields.length > 0
            ) {
                return { dicts: {}, dictmaps: {} };
            } else {
                return {};
            }
        }
   })
}