Vue2和Vue3都是基于template/jsx语法构建视图

vue2中：vue-template-compiler 实现对tempelate视图的编译，编译为vnode
vue3中：基于@vue/compiler-sfc这个插件实现视图编译

渲染步骤

1) 视图编译为虚拟Dom对象（vnode:vue内部构建的一个对象，描述节点相关特征）

_vnode:{
 tag:'div',
 data:{staticClass:'box'},
 children:{}
}

2) 如果是第一次渲染：把虚拟Dom编译为真实Dom(真实Dom:放到浏览器中进行渲染)

3) 视图更新：重新生成虚拟dom，和上次生成的虚拟dom进行对比【dom-diff】，计算出差异，再渲染时候只把有差异的部分进行渲染

渲染机制流程图

Vue2和Vue3渲染差异

vue2:
vue3：Performance 性能上做了提高，内部重写了虚拟dom的实现
（处理时跳过静态节点，只处理动态节点）
   效果：客户端渲染视图提高了1.3~2倍
         服务器端SSR渲染提高了2~3倍