什么是双向绑定

双向绑定，这词儿在编程界挺火的，尤其在前端开发里。我接触这个概念也有好几年了，得说，双向绑定让界面和数据的同步变得超级方便。
双向绑定就是指数据和视图（我们常说的界面）之间的一种自动同步机制。我以前在做网页开发的时候，最头疼的就是数据变化了，界面没反应，或者反过来，界面改了，数据没更新。双向绑定解决了这个问题。
举个例子，假设我有个输入框，用户在框里输入文字，这个文字会实时显示在一个标签里。这就是双向绑定的一个应用场景。当时我用的是Vue.js框架，里面的v-model指令就是实现双向绑定的神器。
有意思的是，双向绑定通常分为两种：一种是表单绑定，另一种是属性绑定。表单绑定主要是用来处理用户输入的，比如上面的输入框；属性绑定则是用来绑定一些非输入的属性，比如一个按钮的禁用状态。
说实话，双向绑定听起来简单，但实现起来其实挺复杂的。它需要背后有一套机制来监听数据的变化，然后自动更新视图，反之亦然。我当时也没想明白它是怎么做到的，但现在想想，就是通过各种事件监听和响应式系统来实现的。
这块我没亲自跑过，但数据我记得是X左右，但建议你核实。双向绑定确实让开发效率提高了不少，但也可能有点偏激地增加了项目的复杂性。不过，用得好，还是能带来不少便利的。

Vue 2.0 中双向绑定由 v-model 实现，Vue 3.0 中则使用 v-model 结合 Composition API。
这就是坑，别信 v-model 就是双向绑定，实际是单向绑定，数据流向视图，事件流向 Vue。
别这么干，直接操作 data 属性，再用 watcher 监听变化，手动更新视图。
实操提醒：了解 Vue 3.0 Composition API 的响应式系统原理，自己实现双向绑定。