首页 > 其他 > 详细

vue响应式的原理

时间:2021-09-02 08:30:21      阅读:27      评论:0      收藏:0      [点我收藏+]

1.js中的对象

  • 在es5里呢,js对象呢有一个特性,就是可以进行set和get
  • 何为set和get呢
  • 所谓set,就是可以在set中检测到对象某个属性值是否改变了,只要对象的属性值改变就会触发它
  • 而get呢,可以在get里面进行数据的拦截处理,比如说我一个对象里有一个code值为123,我在set里把它重赋值为456,那么我第一次访问这个对象里的code时,他就是重赋值的456

2.vue响应式

  • 而vue就利用了对象的set和get特性(就是可以检测到数据改动),将普通对象变成响应式对象
  • vue初始化数据之后,会对所有的数据进行一个遍历处理,给每一个数据加上set和get,是用的object.defineproperty这个方法,组成一个watcher实例
  • 当数据变化的时候,就会触发set,通知watcher去更新视图
  • 值得一提的是在vue2中如果通过下标的方式去修改数组视图不会更新,这是因为在将普通对象变成响应式对象的过程中,会先判断这个数据是不是数组,如果是数组就不会给他添加set和get,这主要是为了vue的性能考虑,当然,为了处理这个问题,vue的团队重写了数组push等方法

vue响应式的原理

原文:https://www.cnblogs.com/zoo-x/p/15210696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!