Vue 原理分析（一）

三要素

1. 响应式：vue如何监听到data的每个属性变化

什么是响应式？

    var vm = {};
    var data = {
      name: "zahngsan",
      age: 20
    };
    var key, value;
    for (key in data) {
      (function(key) {
        Object.defineProperty(vm, key, {
          get: function() {
            console.log("get", data[key]);
            return data[key];
          },
          set: function(newVal) {
            console.log("set", newVal);
            data[key] = newVal;
          }
        });
      })(key);
    }

• 通过这个小例子即可得知响应式是依据Object.defineProperty()函数实现的
• 将data的属性代理到vm上

2 .模版引擎：vue的模版如何被解析，指令如何处理

1.模版是什么？

• 模版的本质：字符串
• 有逻辑，如：v-if v-for 等
• 与html格式很像，但有很大区别
• 模版最终必须转换成JS代码
• 最终还是要转换成html来显示

2.render函数与虚拟Dom

3. 渲染：vue的模版如何被渲染成HTML，以及渲染过程

1.render函数

• v-model怎么实现的？
  1⃣️.双向数据绑定，分为get和set

• v-click怎么是实现的？
  1⃣️.渲染的时候加一个click事件，直接对应上自定义的函数

• v-for怎么实现的？
  1⃣️.遍历，将标签汇聚成数组一起返回

• render函数与html有什么关系？
  1⃣️.vm._c与snabbdom -h 函数之间的联系（返回虚拟dom节点）
  2⃣️.updateComponent在页面首次渲染与修改data中属性的时候执行
  3⃣️.with语法

vue的整个实现流程

1. 解析模版成为render函数
1⃣️.with的用法
2⃣️.模版中的所有信息都被render函数包含
3⃣️.模版中用到的data中的属性，都变成了JS的变量
4⃣️.模版中的 v-model v-for v-on 都变成了JS逻辑
5⃣️.render函数返回vnode
2. 响应式开始监听
1⃣️.Object.defineProperty函数
2⃣️.将data的属性代理到vm上
3. 首次渲染，显示页面，且绑定依赖
1⃣️.初次渲染，执行updateComponent，执行vm._render()
2⃣️.执行render函数，会访问到vm.list和vm.title
3⃣️.会被响应式的get方法监听到
4⃣️.执行updateComponent，会走到vdom的patch方法
5⃣️.patch将vnode渲染成DOM，初次渲染完成
4. data属性变化，触发rerender
1⃣️.修改属性，被响应式的set监听到
2⃣️.set中执行updateComponent
3⃣️.updateComponent重新执行vm._render()
4⃣️.生成vnode和prevVnode,通过patch进行对比
5⃣️.渲染到html中

拓展

使用jq和使用框架的区别

• 数据与视图的分离，解耦
• 以数据驱动视图，只关心数据的变化，DOM操作被封装📦

什么是MVVM

• MVVM - Model View VierModel
• 三者之间的联系，以及如何对应到各段代码
• ViewModel的理解，联系View和Model