【Vue】Vue/MVVM整体实现流程

总分结构总结。

首先得知道Vue/MVVM的三要素：
1.响应式：Vue如何监听到data属性的变化？
2.模板引擎：Vue的模板如何被解析？指令如何处理？
3.渲染：Vue的模板如何被渲染成html?它的渲染过程是怎样的？以及data属性变化的时候如何重新渲染。

总的来说，vue的整体实现流程分为以下四步：

1.解析模板成render函数
2. 响应式开始监听
3. 首次渲染显示页面，且绑定依赖
4. data属性变化，触发rerender函数

在第一步模板解析成render函数中，要知道

1. 为什么模板要解析成render函数
2. render函数执行的时候要注意的地方（with的用法，和响应式之间的关系）

在第二步响应式开始监听中，要知道:

1. Object.defineProperty的使用
2. 将data属性挂载在vm上（为什么，和render函数有什么关系）
3. 为什么要监听get

在第三步首次渲染显示页面，且绑定依赖中，要知道

1. 渲染过程是什么样的（有一个什么函数，这个函数中执行了啥，返回了个啥，又到了什么中，用了vdom的什么方法）

在第四步监听data属性变化，触发rerender函数中，要知道

1. data属性变化被什么监听到了
2. 监听到了之后又触发了什么函数，这个函数触发以后又进行了哪些一系列操作，走到了vdom的一个什么函数中，重新触发了render函数

下面开始分步详细总结vue实现的整个流程（根据上一篇博客的todolist demo分析）

第一步：解析模板成render函数。
模板：

我们通过在vue的源码中打印code.render,得到模板解析出来的render函数为：

回答第一步应该知道的问题：
为什么模板要解析成render函数:
模板的本质其实是一串有逻辑（一些指令v-if,v-for）的字符串。与HTML结构很像，但有很大区别:vue模板是动态的，HTML模板是静态的。模板字符串最终必须转换成JS代码（render函数），原因有两点：a.模板中有逻辑，必须用JS来处理逻辑（JS是前端中唯一一个图灵完备的语言） b.要将模板渲染到页面上，必须用JS实现。

• with的用法
• 模板中所有信息都被render函数包含
• 模板中用到的data中的属性都变成了JS变量
• 模板中用到的Vue的指令都变成了JS逻辑
• render函数返回vnode

第二步响应式开始监听：

• 通过Object.defineProperty函数我们可以监听到data属性的get和set
• 将data属性代理到vm上，这和render函数有很大的关系，render函数中有个with(this){},这块的this指的是vm,所以with(this){}里面的变量即指的是vm.title vm.list,而tilte和list变量均是data的属性，所以要将data的属性代理到vm上
• 为什么要监听get,直接监听set不行吗？data中有很多属性，在模板中有些可能被用到，有些可能不会用到，被用到的会走到get,不会用到的不会走到get,未走到get的属性，肯定也就没有用到，那set的时候我们也无需关心。这样可以避免不必要的渲染，提高性能。

第三步首次渲染显示页面，且绑定依赖：

• 初次渲染，执行updateComponent()函数，执行vm._render()函数
• 执行render函数，会访问到vm.title vm.list
• 访问vm.title vm.list就会被响应式的get方法监听到
• 执行updateComponent()函数，会走到vdom的patch方法
• patch将vnode渲染成DOM,初次渲染完成

第四步监听data属性变化，触发rerender函数

• 修改属性，被响应式的set监听到
• set中执行updateComponent()函数
• updateComponent()函数重新执行vm._render函数
• 在update函数中生成vnode和preVnode,通过vdom的patch函数进行对比
• 渲染到html中