vue 获取数组长度_Vue数据响应式

Vue的响应式原理是通过Object.defineProperty转换数据属性,监听数据变化。但Vue无法直接检测数组某些变动,如索引赋值或长度修改。解决方法包括使用Vue.set。
摘要由CSDN通过智能技术生成

响应式是一种设计模式。

页面响应式布局就是根据页面缩放大小调整布局,数据响应式就是代码根据数据变化作出反应

深入响应式原理 — Vue.js​cn.vuejs.org
61be9037e0d7dee129bf7bf12a90f851.png

简单来说,当我们把一个 JavaScript 对象传入 Vue 实例作为data选项时,Vue将遍历此对象所有的 property,使用Object.defineProperty把这些 property 全部转为getter/setter,并将property记录为依赖。 Vue 追踪这些依赖,在其被访问和修改时通知变更。

具体实现:

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

10d6fe64fef19e142068279aa27e395b.png

注意:

由于 JavaScript 的限制,Vue不能检测数组和对象的变化。

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值