Vue2源码核心考点总结

组件渲染和更新过程？

初次渲染

• template 编译成 render （通常webpack会使用vue-loader 在打包的时候把这一步做了）
• 触发数据响应式
• 执行render函数 生成vnode
• path(elemnt, vnode) 渲染dom

组件更新

• 修改data 触发 更新
• re render 重新执行render
• patch(oldVnode, newVnode) 进行比对， 更新需要修改的dom

vue如何监听到data触发需要更新视图？

• 监听数据变化
• 初次渲染时执行render会触发getter， vue会进行依赖收集
• 修改data时， 触发过getter的date数据才会被触发视图更新， 因为其他没有触发getter的说明没被render函数使用到， 和视图无关所有无需更新

diff算法

• 同级比对
• tag 不相同认为不是同一个节点
• 判断key和tag相同就认为相同节点

前端路由hash和history分别是怎么监听的

hash

• location.hash
• window.onhashchange 监听变更

history

• history.pushState 跳转
• window.onpopstate 监听前进后退