MVVM和Vue

MVVM：

• M:model
• V:view
• VM:viewmodel
• 将数据和视图分离，解耦。
• 用数据驱动视图。

Vue的实现大致流程

• 第一：解析模板并生成render函数
• 第二：响应式监听
• 第三：首次渲染，显示页面，绑定依赖
• 第四：data属性变化，触发更新html

解析模板：

• render函数中通过with(this){}将操作都绑定到vue对象的实例上，
• 模板中所有信息都被render函数包含，通过类似snabbdom的js库中的h()函数通过js结构化模板
• 模板中用到的data中的属性，都是js变量，
• 模板中的v-model，v-for，v-on都是js逻辑
  • v-model的实现：通过在render函数中实现逻辑，在input标签上绑定input事件，并将input的value赋值给data中的属性，来实现set。
  • 在vue实例代理了data中的属性后，可直接通过vue实例获取data中的对应属性。实现get。
• 最终返回一个vnode。

响应式监听：

• 通过Object.defineProperty()进行实现，监听get和set的情况。
• 将data的属性代理到vue实例上。

 首次渲染，显示页面，绑定依赖：

• 为何要监听get，直接监听set不行吗？
• data中有很多属性，有些被用到，有些可能不被用到
• 被用到的会走到get，不被用到的不会走到get
• 未走到get中的属性，set的时候我们也无需关心
• 避免不必要的重复渲染

data属性变化，触发更新html:

• 修改属性，被响应式的set监听到
• set中执行updateComponent方法
• updateComponent重新执行vue实例的render()
• 生成的vnode和prevVnode，通过patch进行对比。
• 渲染到html中