1.如何理解vue响应式
思路:
1.什么是响应式?
2.为什么vue需要响应式?
3.它能给我们带来什么好处?
4.vue响应式是怎么实现的,有哪些好处?
5.vue3响应式有什么新变化?
答案:
- 数据响应式是能够让数据变化可以被检测,并对这种变化做出响应的机制
- MVVM框架需要解决的一个核心问题是数据层和视图层的连接,通过数据驱动应用,数据变化,视图更新,要做到这一点,就需要用到数据进行响应式处理,这样一旦数据发生变化就可以立即做出更新处理
- 以vue为例说明,通过数据响应式加上虚拟dom和patch算法,开发人员只需要操作数据,关心业务,完全不需要操作繁琐的dom,大大提升开发效率,降低开发难度
- vue2的数据响应式会根据类型做处理,如果是对象,则采用Object.defineProperty()的方式进行数据拦截,当数据发生变化时,我们感知并做出响应,如果是数组则通过覆盖数组对象原型的7个变更方法("push", "pop", "shift", "unshift", "splice", "sort", "reverse"),使这些方法可以额外的做更新通知,从而做出响应。这种机制很好的解决了数据响应化的问题,但是在实际的使用中,也是有一些缺点的:新增或者删除属性,用户需要使用特殊的Vue.set/delete这样特殊的api才行;无法通过索引或者修改数组长度触发响应式;对于es6中新产生的Map、Set这些数据结构不支持等问题。
- 为了解决这些问题:vue3重新编写了这一部分的实现,利用es6的Proxy代理要响应化的数据,他有许多好处,编程体验是一样的,不需要使用特殊的api,初始化性能和内存消耗都得到了大幅度的改善;另外响应化的代码抽象成了reactity包,使得我们可以更加灵活的使用它,第三方的扩展开发起来也更加灵活了
参考文档:mp.weixin.qq.com/s/URpCZOLma…