vue之数据的双向绑定

指令

在Vue.js中，双向数据绑定的指令是v-model。这个指令用于在表单、及元素上创建双向数据绑定。

原理

Vue.js的双向数据绑定（也称为双向同步）是基于其响应式系统的。以下是其工作原理的简化概述：

• 一、Object.defineProperty（或Proxy，在Vue 3中）：
  Vue在初始化实例时，使用Object.defineProperty（Vue 2）或Proxy（Vue 3）来遍历data对象中的属性，并使用getter和setter方法将其转换为getter/setter属性。这样，当数据发生变化时，setter方法就会被调用，从而触发相应的更新。
• 二、监听DOM事件：
  当使用v-model指令时，Vue会监听相应的DOM事件（如input事件对于元素）。
  当这些事件被触发时，Vue会调用相应的方法（通常是update:modelValue事件监听器），该方法会更新组件的响应式数据。
• 三、更新DOM：
  当响应式数据发生变化时，Vue会触发依赖该数据的组件的重新渲染。
  对于使用v-model的表单元素，Vue会使用新的数据值来更新DOM元素的值。
• 四、双向绑定：
  由于Vue同时监听了数据的变化和DOM事件，因此当数据变化时，DOM会自动更新；当DOM元素的值发生变化时，数据也会自动更新。这就是所谓的“双向数据绑定”。
  注意：在Vue 3中，使用了Composition API和Proxy来替代Object.defineProperty，从而提供了更好的性能和对ES6类的支持。但是，双向数据绑定的基本原理仍然是相同的。

此外，v-model指令还支持一些修饰符，如.lazy、.number和.trim，用于控制DOM事件触发的时间、转换数据类型或去除字符串两端的空格。