Vue模板转换成视图的过程

Vue模板转换成视图的过程

1.vue.js通过编译将templete模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树。
2.在对Model进行操作的时候,会触发对应Dep中的Watcher对象。Watcher对象会调用对应的update来修改视图,这个过程主要是将新旧虚拟节点进行差异对比,然后根据对比结果进行DOM操作来更新视图。简单来说,在Vue的底层实现上,Vue将模板编译成虚拟Dom渲染函数。结合Vue自带的响应系统,在状态改变时,Vue能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。
在这里插入图片描述渲染函数:渲染函数是用来生成Virtual Dom的,Vue推荐使用模板来构建我们的应用界面,在底层实现中Vue会将模板编译成渲染函数。当然我们也可以不写模板,直接写渲染函数,以获得更好的控制。
VNode虚拟节点:它可以代表一个真实的dom节点。通过createElement 方法能将VNode渲染成dom节点。简单的说,vnode可以理解成节点描述对象,它描述了应该怎样去创建真实的DOM节点。
patch(也叫做patching算法):虚拟DOM最核心的部分,它可以将vnode渲染成真实的DOM,这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果找出需要更新的节点进行更新。其实际作用是在现有DOM上进行修改来实现更新视图的目的。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页