局里局气的范先生
运维施法工程师
获得徽章 0
- #每天一个知识点# Vue 实现双向数据绑定原理
Vue2.x 采用数据劫持结合发布订阅模式（PubSub 模式）的方式，通过 Object.defineProperty 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
Vue 的数据双向绑定整合了 Observer，Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化->视图更新，视图交互变化（例如 input 操作）->数据 model 变更的双向绑定效果。
Vue3.x 放弃了 Object.defineProperty ，使用 ES6 原生的 Proxy，来解决以前使用 Object.defineProperty 所存在的一些问题。展开评论4 - 有无大佬分享下秋招提前批or秋招上岸心得啊
![[流泪]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
本人情况如下
学历：民办
实习经历：一段且正在实习(前端)，百人互联网企业
技术栈：Vue2、Vue3、TypeScript、Vue生态(Pinia、vite...)、react(刚入门)、后端会Java和Springboot
项目经历：实习参与项目较多，各种端的都有，涉及Vue与react。校内工作室基本是Vue2的，个人的是Vue3+ts
获奖：蓝桥杯国三、省一
不求大富大贵，只求毕业有个兜底![[泣不成声]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_40.348108b.png)
展开748
![[大笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_55.74ed629.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
![[泣不成声]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_40.348108b.png)