vue原理 - 简解

95 阅读1分钟

是什么:

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和订阅—发布者模式这两点。

  1. 通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树。
  2. 一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化。
  3. 截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据。
  4. 最后,通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定

为什么:

3 DOM操作非常耗费性能,所以使用vdom

怎么做:

Vue原理 - 总结

  • 组件化
  • 响应式
  • vdom和diff
  • 模板编译
  • 渲染过程
  • 前端路由