妍思码匠的博客

初始化之前，首先要通过import VueRouter导入，说明VueRouter也是一个对象。通过源码看到，在new Vue()的时候，将实例化的router对象传入，然后与vuex同样的原理，利用data实现响应式，在Vue.use调用router对象的install方法时初始化，注册插件，将插件存入installedPlugins中保证不会重复注册，挂载到全局，同样也是借助beforeCreate钩子函数实现。

Vuex就是一个构造函数，他拥有install方法和Store类这两个属性。在vue初始化调用new Vue的时候，将store作为参数传入，然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局，从而可以保证全局只有一个唯一的store对象。Store这个类拥有commit和dispatch这些方法，同时将用户传入的state包装成data，从而在vew Vue()的过程中实现了响应式。

通过js的层层封装，互相调用，实际就是利用js的Object.defineProperty()方法，然后实现了一个发布订阅模式。整体逻辑是在vue初始化的时候，通过Object.defineProperty()重写数据的set、get方法。在每个调用到变量的地方（例如vue的模板字符串{{ }}），会触发重写的get方法，该方法增加一个观察者；在每次修改变量值的时候，会触发重写的set方法，该方法会通知所有的观察者更新视图。详细源码解读可查看。

调用initState初始化state, props, methods, computed, watch等，将data, props都挂载到vm._data, vm._props上，设置访问数据代理，访问this.xx就是访问vm.xx；调用initLifecycle初始化vm.$parent, vm.$root, vm.$children, vm.$refs 等属性值；8，eventsMixin中，在Vue原型上定义$on, $once, $off, $emit 事件方法，并返回vm。

监听#号后面的url变化所有的变化都在前端执行不会像服务器发送请求不会造成404。

vuex中的每个核心模块都有一个辅助函数，主要是用来映射他们的变量。

通常会在main.js中注册全局的自定义指令。主要语法Vue.directive(指令名，{ 钩子函数名称: 钩子函数 })bind - 只调用一次，在指令第一次绑定到元素的时候调用。通常可用来做一些初始化操作unbind - 只调用一次，指令与元素解绑时调用inserted- 被绑定元素插入父节点时调用（只能保证父节点存在，但不一定插入到文档中）update - 所在的组件的虚拟dom更新时候调用（但是可能发生在他的子组件虚拟dom更新前）

在vue中，修饰符将各种dom事件的细节进行封装，使我们在vue开发中更便捷。常见的有表单类的修饰符、事件类的修饰符等。

this.$refs是一个对象，他是当前组件使用ref注册过特性的所有dom元素和子组件的实例。也就是通过ref来注册一个元素通过this.$refs来访问注册的dom元素或子组件实例1，作用在当前页的上，获取的是当前页面节点的dom元素，this.$refs.refName，2，作用在子组件上，获取的是子组件对象，调用方式也是this.$refs.refName3，与v-for一起使用，动态实现循环列表类的标签。