Vue中数据双向绑定原理王者级附带青铜级mixins组件混入

本文深入探讨Vue的王者级数据驱动、响应式原理和双向数据绑定,解析v-model指令如何实现视图与数据同步,并讨论青铜级的mixins组件混入,阐述其实现复用和管理组件选项的方式。
摘要由CSDN通过智能技术生成

原理( 王者 )

  1. 数据驱动
    当数据发生改变时,视图也会进行更新,这叫做数据驱动,也就是数据驱动视图
  2. 深入响应式原理
    数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新
  3. 双向数据绑定原理
    当我们使用 v-model 指令绑定了表单元素时,那么我们可以在视图直接获得数据,当视图发生改变时,数据也会进行更新

综上: 三者都是应用了同一个底层原理,这个底层原理由es5的 Object.defineProperty 属性来提供

  • vue中底层原理的实现主要是依赖 存储器( getter/setter )

  • 我们利用了数据劫持和事件的发布订阅来实现双向数据绑定,当我们在vue data选项中定义数据时,vue会通过观察者对象( observer )将data选项中的所有key,经过Object.defineProperty 的getter 和setter进行设置,当我们通过 v-model指令绑定元素是, 自动触发getter,getter会返回一个初始值,这样我们在视图中就可以看到数据了,当视图中内容改变时,会触发setter,setter会通知vue,视图已经进行了更新,vue会重新生成 虚拟DOM , 继而通过 新旧 虚拟DOM 对比, 生成patch对象,再将patch对应渲染到视图中

Vue.set/this.$set 的原理( 数组的下标和length不响应 )

底层:Object.assign

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值