vue入门

初始vue框架

一、对mvvm的理解

mvvm是model-view-viewmodel的缩写

1. Model代表数据模型。通过修改Model中的数据完成业务逻辑
2. View代表UI组件，负责把数据转化为UI展现出来
3. ViewModel监听数据模型的改变和控制视图行为、处理交互。是一个同步view和model的对象。

mvvm架构下，View和Model之间没有联系，而是通过ViewModel进行交互，绑定。Model和ViewModel之间双向绑定，用户触发View层数据变化通过ViewModel改变Model数据，而Model数据变化会立刻反映到View层。因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态同步问题。mvvm帮你完成复杂的数据状态维护。

二、Vue生命周期

beforeCreate（创建前），在数据观测和初始化事件未开始。

created（创建后），完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。

beforeMount（挂载前），在挂载开始之前被调用，render函数被调用，实例已经完成，data中的数据开始编译，但未挂载到html页面上。

mounted（挂载后），在el被新创建的vm.$el替换，并挂载到实例上去后调用。数据已经完成渲染，并挂载到html页面上。此过程进行ajax交互。

beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以再该钩子中进一步更改状态，不会触发附加的重复渲染。

updated（更新后），由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，可以执行依赖于DOM的操作。应该避免在此期间更改状态，因为这可能导致更新无线循环。该钩子不能再客户端被调用。

beforeDestroy（销毁前），在实例销毁前调用，实例仍然可用。

destroy（销毁后），在实例销毁后调用，调用后，所有事件监听器被移除，所有子实例被销毁。该钩子不能再客户端被调用。

三、Vue数据双向绑定原理

vue实现数据双向绑定主要：采用数据劫持结合发布者-订阅者模式。通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发响应监听回调。

当一个普通javascript对象传给vue实例作为它的data选项时，vue将遍历它的属性，用Object.defineproperty()将它们转为getter/setter，在内部vue追踪依赖，在属性被访问和改变是通知变化。

1. 数据监听Observer，监听对象的所有数据，数据发生改变则通知订阅者。
2. 指令解析Compile，对每一个元素节点的指令解析，根据指令模板替换数据，并绑定相对应的函数。
3. Watcher，未Observer和Compile的桥梁，收到订阅者数据变更通知，执行指令绑定的响应回调函数，更新视图。

vue的双向绑定将mvvm作为数据绑定的入口，整合Observer,Compile和Watcher三者，通过Observer来监听自己的Model的数据变化，通过Compile来解析编译模板指令( vue中用来解析{{}} )，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化 -> 数据model变更双向绑定效果。