1.vue组件渲染更新过程
1）初次渲染过程
解析模板为render函数
触发响应式，监听data属性getter与setter
执行render函数，生成vnode，patch(elem,vnode)
2）更新过程
修改data触发setter函数（初次渲染中已经监听）
重新执行render函数，生成newVnode
patch(vnode,newVnode)
3)异步渲染
$nextTick函数：
汇总data修改，一次性更新视图
减少DOM操作次数，提高性能
2.响应式
1）核心API-Object.defineProperty
2）缺点：
有对象存在，故需要深度监听，需要递归到底，一次新计算量大
无法监听新增属性/删除属性
无法原生监听数组，需要特殊处理
3.虚拟dom
DOM操作非常消耗性能，为了优化dom操作提高性能而产生的概念
用JS模拟dom结构，计算出最小变更，操作dom
举例用于snabbdom中的api
h，作用：创建标签节点
vnode，作用：通过h创建中，children参数多层嵌套h模拟虚拟dom产生
patch，作用：通过传入新旧vnode进行对比并操作后实现dom更新，使用diff算法：
把节点以树的形式，进行遍历对比时间复杂度为O(n³)
优化：时间复杂度为O(n)
只比较同一层级，不跨级比较
tag不相同，则直接删除重建，不再进行深度比较
tag和key，两者都相同认为是同一节点，不再进行深度比较
4.模板编译
1）with语法
使用with能改变{}内自由变量的查找方式，当作obj的属性来查找
2）把模板转换为某种js代码，即编译模板
3）vue组件中是应用render代替template，将模板函数编译为render函数，执行render函数返回vnode
并且执行render函数会触发getter
基于vnode再执行patch与diff
使用webpack,vue-loader,会在开发环境下编译模板
5.hash与H5 history
1）hash变化
hash变化会触发网页跳转，即浏览器的前进后退
hash变化不会刷新网页，SPA必须的特点
hash永远不会提交到server端
API:window.onhashchange = (event)=>{}
2)H5 history
用url规范的路由，但跳转时不刷新页面
history,pushState
window.onpopstate
需要后端支持
标签：hash,函数,render,16,dom,vnode,面试,模板 From： https://www.cnblogs.com/qwqxyd/p/16785897.html