3分钟带你搞懂Vue双向绑定原理及问题剖析

二、Vue的双向绑定

=============================================================================

⌚双向绑定的原理

---

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图

通过Object.defineProperty()来劫持各个属性的setter， getter，在数据发生变动时通

知Vue实例，触发相应的​getter​和​setter​回调函数。

当把一个普通 Javascript 对象传给Vue 实例来作为它的 data 选项时， Vue 将遍历它的属性，用 Object.defineProperty 将

它们转为 ​getter/setter​。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

⚡双向绑定的核心

---

关于VUE双向数据绑定，其核心是 Object.defineProperty() 方法

⌚介绍 Object.defineProperty() 方法

---

Object.defineProperty(obj, prop, descriptor)

这个方法内有三个参数，分别为 obj（要定义其上属性的对象）、prop（要定义或修改的属性）、descriptor（具体的改变方法）

简单来说，就是用这个方法定义一个值，当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，同时又调用了里面的set方法

运行效果

三、单向绑定与双向绑定的区别，适合的场景？

========================================================================================

❇️单向绑定

---

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。

缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

♻️双向绑定

---

优点是在表单交互较多的场景下，会简化大量业务无关的代码。

缺点就是由于都是“暗箱操作”，我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心)，潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个，新手玩家很容易将数据流转方向弄得紊乱，如果再缺乏一些“管制”手段，最后就很容易因为一处错误操作造成应用雪崩。

四、简单实现一个JS双向绑定

=================================================================================

⏳效果图

---

✅核心源码

---

演示JS实现Vue双向绑定

请输入内容：

显示的内容：

五、Vue.js实现简单双向绑定

===================================================================================

⏰效果图

---

✅核心源码

---

演示Vue实现双向绑定

请输入内容：

显示的内容：

{{msg}}

六、某些情况下对象或数组无法双向绑定的解决方案

==========================================================================================

♨️数组无法双向绑定的解决方案

---

修改数组中的内容，数组中的元素发生了变化，而页面没有发生变化

✨数组双向绑定解决效果图

♻️核心源码

修改数组的内容后，数组发生了变化，而页面没有发生变化

{{item}}

<button @click=“clk1”>点击1

<button @click=“clk2”>点击2

✅问题解决

第一个按钮修改后无法显示是因为直接用下标赋值会出现数据不一致情况，可见，数组中的元素已经修改，但页面元素无法显示

解决方案如下

解决方案是通过$set方法来设置数组的值，该方法有三个参数，第一个是要被设置值的目标对象，第二个是设置值在数组中的索引，第三个是设置的值

this.$set(obj, index, value)

第二个按钮就是这样实现了数组的内容修改以及双向绑定的正确显示

♨️对象无法双向绑定的解决方案

---

✨对象双向绑定解决效果图

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

648333)]

[外链图片转存中…(img-GB0Vri9v-1713451648333)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-21VL45cO-1713451648334)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-HTxKYxtz-1713451648334)]

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

[外链图片转存中…(img-iK6pbKlF-1713451648334)]