MVVM及Vue渲染机制探索

MVVM.png

MVVM - Model View ViewModel

总所周知，Vue是目前比较流行的MVVM前端框架，其核心在于VM。Vue通过MVVM架构将数据和视图进行了分离，将两者进行解耦，通过VM层构建两者的沟通渠道。其中View层通过事件绑定触发Model中data的更新，而Model中的数据可以通过数据绑定来及时针对数据的变化更新相应的视图。

Vue MVVM框架的三大要素

1. 响应式
问题： Vue如何监听到data的每个属性变化？

• 什么是响应式？
  Vue能监听到数据的修改，并根据数据的修改更新对应的视图，而视图中数据的修改也能触发数据的更新。
• Vue是通过何种方式实现响应式的？
  通过Object.defineProperty，使用get()和set()方法，使用get/set获取数据的值和对
  data属性值进行修改，由于是函数，则可以加入自定义的代码，如监听到变化是否需要更新对应的视图，通过updateComponent函数实现。
• 为什么可以直接通过this获取数据，而不用通过this.data？
  因为data属性被代理到vm上，在Object.defineProperty
  代码实现：
  通过闭包和立即执行函数保存每一个key值及对应的get/set函数，块级作用域

        var vm = {}
        var data = {
            name: 'zhangsan',
            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)
        }

2. 模板引擎
问题: Vue的模板如何被解析，指令如何处理?

• 模板是什么
  本质是字符串，有逻辑, 模板中所有信息需要被解析成vnode。
  通过render函数对模板进行解析，render函数会解析模板的所有信息，包含属性，数据，事件等。
• 模板中如何实现逻辑及实现v-model等指令
  在render函数中执行对应的逻辑，如循环，条件等，返回不同的vnode，v-model则通过上述介绍的，在get, set中进行监听即可。

3. 渲染
问题： Vue的模板如何被渲染成html,以及渲染过程？

• updateComponent中实现vdom的patch
• 页面首次渲染执行updateComponent
• data中每次修改属性，执行updateComponent

vue的整个实现流程

• 解析模板成render函数
  Vue中使用了with，模板中所有信息都被render函数包含，模板中用到的data中的属性，都变成了JS变量，模板中的v-model, v-for, v-on都变成JS逻辑。render函数的最终结果返回vnode
• 响应式开始监听
  Object.defineProperty监听set和get，将data的属性代理到vm上
• 首次渲染，显示页面，且绑定依赖
  初次渲染，会执行updateComponent和vm._render()，具体流程如下：
  执行render函数过程中，会访问到vm.list和vm.title 即会被响应式的get方法监听到
  执行updateComponent，会走到vdom的patch方法
  patch将vnode渲染成DOM，初次渲染完成
• data属性变化，触发rerender
  修改属性，被响应式的set监听到，set中执行updateComponent, updateComponent重新执行vm._render()，生成的vnode和preVnode，通过patch进行对比，渲染到html中

问题： 为什么要监听get，不直接监听set？
data中有很多属性，会被用到的走get，不会用到的不走。避免不必要的重复渲染