vue双向绑定是通过 数据劫持 结合发布者订阅者模式 的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
通过watch来监听数据变化,当数据发生变化时,触发通知所有订阅该模式的对象进行数据更新。
补充:主要采用:数据劫持结合“发布-订阅”模式的方式,通过Object.defineProperty()的 set 和 get,在数据变动时发布消息给订阅者触发监听。
当data 有变化的时候它通过Object.defineProperty()方法中的set方法进行监控,并调用在此之前已经定义好data 和view的关系了的回调函数,来通知view进行数据的改变
而view 发生改变则是通过底层的input 事件来进行data的响应更改
我们来写一个简单的案例:
接下来看看效果:
这!就是vue的双向绑定原理,你学会了吗?
别看文章一般
实则短小精悍
层层过滤筛选
这篇最为精简
我是 “ 我不是费圆 ”,一个正在努力的人。入驻CSDN一年,代码全是开源,不懂你就留言,下班我会查看,请你看看分栏,不用打赏点赞,没人为我宣传,我为自己代言。