Vue双向数据绑定原理

是结合订阅发布模式,通过object.defineProperty来实现数据双向绑定。

  • observer会对data里面所有的属性进行数据劫持和数据代理,给数据对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。
  • watcher是监听data里面所有的属性,当属性被改变之后才会被触发,自身必须有一个update()方法。
  • compile对模版进行解析,将模板中的变量替换成数据,然后初始化渲染页面视图,添加监听数据的订阅者,一旦数据有变动,收到通知,就会去更新视图。

v-model只是双向数据绑定最直观的表现形式

Object.definePropery方法 是在对象上定义一个新的属性
里面的三个值分别是obj 对象属性名属性描述

属性描述符分为两种

1.数据描述符

Configurable 是否重新配置(布尔值)

Enumerable 是否可枚举(布尔值)

Value 默认值

Writable 是否可写(布尔值)

2.访问(存取)描述符

Get 回调函数 监听获取

Set 回调函数 监听设置

object.definproperty 是vue2.x核心语法,属于Es5语法

注意:IE8不支持Es5,所以也就不支持 vue2.x

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值