是什么:
1 采用MVVM模式(模型视图视图模型)
2 核心API-Object.defineProperty(vue3.0启用Proxy)
Object.defineProperty缺点:
- 深度监听,需要递归到底,一次性计算量大
- 无法监听新增属性/删除属性(Vue.set Vue.delete)
- 无法原生监听数组,需要特殊处理
3 虚拟DOM(Virtual DOM)和diff(diff算法是vdom中最核心,最关键的部分)
4 双向绑定原理 - 实现这种双向绑定的关键就在于:Object.defineProperty和订阅—发布者模式这两点。
- 通过建立虚拟dom树
document.createDocumentFragment(),方法创建虚拟dom树。 - 一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化。
- 截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据。
- 最后,通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定
为什么:
3 DOM操作非常耗费性能,所以使用vdom
怎么做:
Vue原理 - 总结
- 组件化
- 响应式
- vdom和diff
- 模板编译
- 渲染过程
- 前端路由