模板编译即渲染更新过程

模板编译即渲染更新过程

一.背景

二.js中的 with语法

用with之后，相当于obj.a obj.b obj.c

三.


四.vue组件中使用render代替template：

返回的createElement函数（类似h函数）,第一参数是 tag标签(字符串)，第二个参数是属性，是一个{}对象，第三个参数是子节点，是一个[]数组

五.渲染更新过程：

1》初次渲染：

这时候可能会有疑问为什么要触发响应式，有什么用呢，其实在执行render函数的时候，已经用了data属性的getter

对{{message}}进行模板编译的时候，会执行render函数同时会触发响应式的get

2》更新过程：

patch中就是diff算法，找打最小差异渲染更新

3》完成流程图(面试描述这个图即可)：

首先黄色模板编译成render函数，执行render函数，会touch Data的getter，此时这个data会被watcher蓝色部分监听起来，然后生成vnode
即虚拟dom树，执行patch函数。当我们setter修改某一值时，要watcher判断这个data是不是之前监听的，若是，则重新render（）生成一个新的vnode然后执行patch。

4》异步渲染：