欢迎大家来到IT世界,在知识的湖畔探索吧!
引入vue.js，new Vue()干了什么呢？
1. 初始化
调用Vue原型上的_init()进行初始化，会初始化vue的生命周期，props，data，methods，computed，watch等，最重要的是利用Object.definedPropty()对data对象里面的属性设置setter和getter函数，实现响应式和依赖收集。
2. 挂载组件
初始化之后调用$mount挂载组件，如果是运行时编译，即不存在render function但是存在template的情况，需要进行【编译】步骤。
3. 编译
编译三部曲，parse（解析）、optimize（标记静态节点做优化）、generate（转成字符串）
parse：利用正则将模板转换成抽象语法树（AST）；
optimize： 标记静态节点，以后update的时候，diff算法可以跳过静态节点
generate：将抽象语法树（AST）转成字符串，供render去渲染DOM
在经历过 parse、optimize 与 generate 这三个阶段以后，组件中就会存在渲染 VNode 所需的 render function 了。
4. 响应式
响应式是vue中最核心的部分，利用Object.definedPropty 设置data所返回的对象后，在进行render function被渲染的时候，会对data对象进行数据读取，会触发getter函数，从而把data里面的属性进行依赖收集，依赖收集的目的是将这些属性放到观察者（Watcher）的观察队列中，一旦我们对data里面的属性进行修改时，就会触发setter函数，setter告诉观察者数据变化，需要重新渲染视图，观察者调用update来更新视图
5. 虚拟DOM
render funtion 会被转换成虚拟DOM，虚拟DOM实际上就是一个js对象，从顶层DOM层层描述DOM，有tag, children, isStatic, isComment等等许多属性来做DOM描述。render function 会被转化成 VNode 节点。Virtual DOM 其实就是一棵以 JavaScript 对象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。
6. 更新视图
当数据发生变化时候，会经历setter => Watcher => update这些步骤，那么最终是怎么更新视图的呢？
在update的时候，会执行patch，将新旧VNode传进去，通过diff算法算出差异，局部更新视图，做到最优化。
下面是掘金上某位老师的图，觉得不错，借鉴一下：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/12225.html
