Vue原理
- 组件化
- 响应式
- 核心API:Object.defineProperty、深度监听
(1) 深度监听，需要递归到底，一次性计算量大
(2) 无法监听新增属性，删除属性（Vue.set /Vue.delete）
(3) 无法监听数组，需特殊处理
- 监听data属性的getter和 setter
- 数组 需要单独处理
- vdom和diff
- 应用背景：DOM操作非常耗费性能
- vnode结构: 用JS模拟DOM结构，计算出最小的变更，操作DOM
- snabbdom使用：vnode | h函数 | patch
- patch(elem, vnode) 和 patch(vnode, newVnode)
- 模板编译
- with语法
- 模板编译为render函数，webpack打包时就已经是一个render函数
- 执行render函数生成vnode
- 渲染过程
- 初次渲染过程
(1) 解析模板为 render函数，（或在开发环境已完成,vue-loader）
(2) 触发响应式，监听data属性 getter、setter
(3) 执行render函数， 生成vnode, path(element, vnode)
- 更新过程
(1) 修改data, 触发setter(此前在getter中已被监听)
(2) 重新执行render函数， 生成newVnode
(3) path(vnode，newVnode)
- 异步渲染
(1) $nextTick, 等待DOM渲染完成后回调
(2) 汇总data的修改，一次性更新视图
(3) 减少DOM操作次数， 提高性能
- 前端路由
- hash
(1) hash变化会触发网页跳转，即浏览器的前进、后退
(2) hash变化不会刷新页面，SPA必须的特点
(3) hash永远不会提交到server端，（前端自生自灭）
(4) window.hashChange()
- H5 history： 配置mode:history
(1) 用url规范的路由，但跳转时不刷新页面
(2) history.pushState(state,'','路由')
(3) window.onpopstate(event) 浏览器前进、后退
- 两者比较
