Vue 成长之路（一）

1、什么是 Vue ?

　　首先，Vue 是一个 MVVM 框架，M -- 模型，就是用来定义驱动的数据，V -- 视图，是通过数据改变后的 html，VM -- 框架视图，就是用来实现双向绑定的中间桥梁。Vue.js 是采用数据劫持结合发布者-订阅者模式的方法，经过 Object.definePropety() 来接吃个够属性的 setter、getter,在数据变更时发布消息给订阅者，出发相应的监听回调。

2、Vue 的生命周期

建立前：beforeCreate
建立后：created
载入前：beforeMounte
载入后：mounted
更新前：beforeUpdate
更新后：updated
销毁前：beforeDestory
销毁后：destroyed

3、Vue 双向数据绑定原理

1. 对须要 Observer 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和
   getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到数据变化。

   说明：

   * Observer 的数据对象：写在 data() 里面用 return 包裹的数据。
    * data() 里面的数据使用 return 包裹，由于使用 return 包裹后数据中变量只在当前的组建生效，不会影响其余组件；不使用 return包裹的数据会在项目的全局可见，会形成全局污染。
    * 若是 data 中的数据为对象，则使用 walk 遍历 data 上每一个 key，对每一个 key 调用 defineRective 来获取该 key 的 set/get 控制权。[defineRective: 设置对象的 key 属性，由watcher 的实例对象进行 get 操做，此时 watcher 的实例对象将被自动添加到 Dep 实例的依赖数组中。在外部操做出发set 时，将经过 Dep 实例的 notify 来通知全部依赖的 watcher 进行更新。]
    * 若是 data 中的数据是数组，就使用 ObserverArray 遍历 data，对 data 中的每个元素调用 Observer 分别进行观察。

2. compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者一旦数据有变更，收到通知，更新视图。
   

3. Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:

   • 在自身实例化时往属性订阅器(dep)里面添加本身
   • 自身必须有一个update()方法
   • 待属性变更dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
4. MVVM做为数据绑定的入口，整合Observer、Compile和Watcher三者，经过Observer来监听本身的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到数据变化
   -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定效果

4、Vue 初始化工做

1.初始化各方法执行顺序

initLifeCycle(vm) -> initEvents(vm) -> callHook(vm, 'beforeCreated') -> initProps(vm) -> initMethods(vm) -> initData(vm) -> initComputed(vm) -> initWatch(vm) -> callHook(vm, 'created') -> initRender(vm)

2.vue生成实例的过程

• new Vue,执行初始化
• 挂载 $mount 方法，经过自定义 Render，template，el 等生成 Render 函数
• 经过 watcher 监听数据变化
• 当数据发生变化，执行 Render 函数，返回 VNode 对象
• 经过 patch 方法，对比新旧 VNode 对象， 经过 DOM Diff 算法，增长、修改、删除真正的 DOM 元素。

5、Vue 自定义指令

1.格式

全局：
    Vue.directive('directiveName', {
        inserted: function(el) {
            ...
        },
        ...
    })
    
局部：
    directives: {
        inserted: function(el) {
            ...
        }, 
        ...
    }

2.自定义指令对象的钩子函数（均为可选）

• bind: 指令第一次绑定到元素是调用，只调用一次
• inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不必定已被插入文档中）
• update: 所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前，指令的值可能发生了改变，也可能没有
• componentUpdated: 指令所在组件的 VNode 及其子 VNode 所有更新后调用
• unbind: 指令与元素解绑时调用，只调用一次

3.钩子函数的参数

• el: 指令所绑定的元素，能够用来直接操做 DOM

• binding: 一个对象，包含如下属性

  * name - 指令名，不含前缀 v-
     * value - 指令的绑定值
     * oldValue - 指令绑定的前一个值
     * expression - 字符串形式的指令表达式
     * arg - 传给指令的参数
     * modifiers - 一个包含修饰符的对象

• VNode: 虚拟节点
• oldVnode: 上一个虚拟节点

6、Vue 响应数据变化的几种方法
1.methods: 每次获取都会从新计算求值
2.computed（计算属性，有缓存）: 基于数据依赖进行缓存，只有当数据变化时，才会从新求值。（计算属性只有 getter，能够在须要的时候本身设定 setter）。computed 擅长处理的情景：一个数据受多个数据影响。
3.watch: 当须要在数据变化时执行异步操做或者消耗较大的操做时，比较有效。watch 擅长处理的情景：一个数据影响多个数据。
4.v-model: 基于数据双向绑定（对于 v-for 循环列表中的项，须要使用键值）

eg(4):
   <div v-for="(item, index) in list" :key="index">
       <input v-model="list[index]" />
   </div>