vue 响应式的了解
2021-03-16 本文已影响0人
Viewwei
- 所谓数据响应式就是数据变化可以检测并对这种变化做出响应的机制
- mvvm 框架中要解决一个核心的问题就是连接数据层和视图层,通过数据驱动应用,数据变化,视图的更新,要做到这一点就需要对数据做响应式处理,这样一旦数据发生变化就可以理解做出更新
- 以 vue 为例子,通过数据响应式加上虚拟 DOM 和 patch 算法,可以使我们只需要我们操作数据,完全不用接触频繁的 DOM 操作,从而大大提升开发效率和降低开发难度
- vue2 中的数据响应式会根据不同的数据类型做不同的处理,如果是对象则采用 Object.defineProperty()的方式定义数据拦截,当数据发生变化的时候或者访问的时候,我们可以感知到并且做出响应.如果数组则通过覆盖该数组的原型方法,扩展他的 7 个方法,使这些方法可以额外的做更新通知,从而做出响应.这种机制很好的解决了数据响应化的问题,但是在实际使用中也存在一些缺点,比如初始化时的递归会造成性能的损失,新增和删除属性时需要用户使用单独的特殊方法才能生效,对应 es6中的 map set这些数据结构不支持等问题
- 为了解决这些问题,vue3 重新编写了这部分的实现,利用 es6 中的 proxy 机制代理要响应的数据,他有很多好处,编程体验一致,不需要单独的 api,初始化性能大大提升,并且数据在初始化的时候,并不会对全局数据响应数据,如果用户需要使用响应式的数据,会动态添加响应式数据.另外由于响应化的实现代码抽取独立的 reacivity,使我们可以灵活的使用,我们甚至不需要引入 vue 都可以体验
