vue暴露的全局方法_Vue全家桶之vuerouter手写实现

经过自己平时的学习，也因为自己现在也是从事的Vue的开发，所以平时对Vue相对来说还是较为熟悉，但是平时自己一直有一个很大的痛点，那就是对Vue的底层实现原理等等这些不够了解，所以很多时候定位错误都可能需要花费很多时间，所以深度学习并且掌握一门框架的核心实现是非常有必要的。

主题：学习Vue的全家桶vue-router的实现原理和步骤

目标：清晰思想，了解步骤，动手实现简化版

预备知识：

• Vue的插件实现写法

• render函数的使用

• 数据响应式方法：Vue.util.defineReactive / new Vue ( { data: {} } )

一、预备知识回顾

1.Vue的插件实现写法：Vue的插件一般是用来为Vue来添加全局功能的，可以用来添加全局方法或者属性、添加全局资源(指令/过滤器等等)、通过全局混入来添加一些组件的选项以及可以添加Vue的实例方法。

• 插件的声明：Vue的插件需要实现暴露一个install方法，方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {
        // 1.添加全局方法或者属性    Vue.globalMethod = function () {}       // 2.添加全局资源    Vue.directive('my-directive', {})     // 3.混入注入组件选项    Vue.mixin({
            created: function (){}    })    // 4.添加实例方法    Vue.prototype.$myMethod = function(methodOptions){}}

• 插件的使用

插件的使用可以有2种形式1.第一种那就是在实现的插件代码里面加上代码：if (typeof window !== 'undefined' && window.Vue) {
        // 使用插件    window.Vue.use(MyPlugin)}2.第二种就是可以直接在main.js中直接使用Vue.use(MyPlugin)

2.render函数的使用：Vue推荐在日常使用中应该使用模板来创建HTML，但是有的时候需要JS的能力，那么这时候就可以使用渲染函数来完成

• 基础

render: function (createElement) {
        // createE