3分钟带你搞懂Vue双向绑定原理及问题剖析，熬了整整30天

⌚介绍 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