侧边栏壁纸
博主头像
uvdream博主等级

一切皆有可能!

  • 累计撰写 39 篇文章
  • 累计创建 21 个标签
  • 累计收到 16 条评论

【深入浅出】vue双向绑定原理

uvdream
2021-09-04 / 0 评论 / 1 点赞 / 109 阅读 / 545 字
温馨提示:
本文最后更新于 2022-04-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

关于vue数据双向绑定原理

面试的过程中vue数据双向绑定原理必然会问的,但是我们知道核心的object.defineProperty,但是这个双向绑定的核心原理我们该如何用话术表达清楚呢?

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

0

评论区