指令
在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事件触发的时间、转换数据类型或去除字符串两端的空格。