局里局气的范先生
运维施法工程师
获得徽章 0
![[大笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_55.74ed629.png)
赞了这篇文章
赞了这篇沸点
#每天一个知识点# 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 所存在的一些问题。
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)
![[流泪]](http://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
获奖：蓝桥杯国三、省一
不求大富大贵，只求毕业有个兜底
![[泣不成声]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_40.348108b.png)
展开
74
8
#每天一个知识点#
flex布局有哪些属性？
1. flex-direction：定义主轴的方向，可以是row（水平方向），column（垂直方向），row-reverse（反向水平方向）或column-reverse（反向垂直方向）。
2. flex-wrap：定义是否换行，可以是nowrap（不换行），wrap（换行），wrap-reverse（反向换行）。
3. justify-content：定义主轴上的对齐方式，可以是flex-start（靠左/靠上），flex-end（靠右/靠下），center（居中），space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧间隔相等）。
4. align-items：定义交叉轴上的对齐方式，可以是flex-start（靠上/靠左），flex-end（靠下/靠右），center（居中），baseline（基线对齐）或stretch（拉伸填充容器）。
5. align-content：定义多行项目的对齐方式，可以是flex-start（靠上/靠左），flex-end（靠下/靠右），center（居中），space-between（两端对齐，行之间间隔相等）或space-around（每行两侧间隔相等）。
6. flex：定义Flex项目的伸缩比例、基准值和可伸缩性。
flex布局有哪些属性？
1. flex-direction：定义主轴的方向，可以是row（水平方向），column（垂直方向），row-reverse（反向水平方向）或column-reverse（反向垂直方向）。
2. flex-wrap：定义是否换行，可以是nowrap（不换行），wrap（换行），wrap-reverse（反向换行）。
3. justify-content：定义主轴上的对齐方式，可以是flex-start（靠左/靠上），flex-end（靠右/靠下），center（居中），space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧间隔相等）。
4. align-items：定义交叉轴上的对齐方式，可以是flex-start（靠上/靠左），flex-end（靠下/靠右），center（居中），baseline（基线对齐）或stretch（拉伸填充容器）。
5. align-content：定义多行项目的对齐方式，可以是flex-start（靠上/靠左），flex-end（靠下/靠右），center（居中），space-between（两端对齐，行之间间隔相等）或space-around（每行两侧间隔相等）。
6. flex：定义Flex项目的伸缩比例、基准值和可伸缩性。
展开
2
点赞
赞了这篇文章
赞了这篇文章
赞了这篇文章