Vue实例

    Vue是如今前端比较火的javascript MVVM的框架，其主要思想是数据驱动与组件化。

在MVVM框架中，View层和Model层相互之间是没有联系的，通过ViewModel使View和Model之间产生交互。ViewModel是Vue实例的核心，创建Vue实例主要就是创建ViewModel的各个组成部分。
DOM Listener和Data Bindings可以看成数据绑定的两个核心工具。DOM Listener主要监听View层中的DOM元素，当DOM元素发生改变时，Model层中数据也会随之发生改变。Data Bindings主要监听Model层中数据，当数据发生改变时，View层中的DOM元素也会改变。
Vue实例主要包括创建，运行，销毁三个阶段，这期间会发生一系列的时间，这些事件就是Vue的生命周期函数。数据驱动是指当Model中的数据发生改变时，页面上的数据也会随之发生改变。通过Vue实例的生命周期简单的介绍一下数据驱动的实现。

（1）创建阶段：首先通过new Vue()创建一个空的Vue实例。通过Init Events and Lifecycle初始化Vue实例中的默认事件以及生命周期钩子函数，此时会自动执行beforecreate这个生命周期钩子函数，这个函数被执行时data，methods，filter等指令对象还没有被初始化。通过Init injections and reactivity初始化注入和校验，执行created函数时，data，methods等指令对象已经被初始化了。因此如果要调动methods方法或者获取数据，最早只能通过created函数使用。此时初始化阶段结束，进入编译阶段。首先判断是否有“el”这个对象，若没有则停止这个生命周期，知道手动挂载“el”对象。若有则判断是否有template这个对象，如果有，则将这个模板编译到render函数中，render函数的作用是将HTML节点渲染成虚拟DOM。如果没有template这个对象，则将外部HTML作为template进行渲染。在执行beforemount这个钩子函数时，已经通过编译在内存生成了DOM，但是并没有挂载到页面中去。通过create VM.$el and replace “el” with it将内存中的虚拟DOM挂载到真实的页面中去。在执行mounted这个钩子函数时，组建的创建阶段已经完成。
（2）运行阶段：这个阶段主要有两个生命周期钩子函数。这两个钩子函数根据data数据的改变而依次执行。当data数据发生改变时，将执行beforeUpdate,此时data数据是最新的。而页面中的数据还是旧的，这两个数据还没有同步。通过Virtual DOM re-render and patch虚拟DOM的重新渲染。当data数据发生改变时，会在内存中重新渲染出一份虚拟DOM，当虚拟DOM发生改变时，会将该虚拟DOM挂载到页面中去。此时就完成了从data（Model）到页面（View）的操作，即完成了数据驱动。
（3）销毁阶段：在执行beforeDestory钩子函数时，Vue实例还没有真正被销毁，data，methods等选项对象还是可用的。当执行destoryed钩子函数时Vue实例已经被销毁，实例中的一些选项对象已经不可用了。