1、初次渲染过程
-
模板字符串被解析成render函数,
一般这一步在开发环境就已经完成了。
-
触发响应式,监听data
-
执行render函数,生成vnode,然后patch(ele,vnode)
执行render函数的时候,回去获取data中的数据,就会执行data中数据的setter,就做了依赖收集。
2、更新过程
- 修改了data,此时就会触发数据的setter,通知依赖更新
- 重新执行render函数,生成新的vnode
- patch(vnode,newVnode)
3、流程图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702210330696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd0ZW5nZzE=,size_16,color_FFFFFF,t_70)
4、异步渲染
汇总data的修改,一次性更新视图,减少dom操作次数,提高性能。
nextTick