vue 绑定实现

Vue 数据绑定实现

Vue 的数据绑定主要通过响应式系统实现，核心是利用 Object.defineProperty 或 Proxy 监听数据变化，并结合虚拟 DOM 更新视图。

双向绑定实现

1. 使用 v-model 指令 双向绑定通常用于表单元素，v-model 是语法糖，自动处理输入事件和数据更新：

   <input v-model="message" />
   <p>{{ message }}</p>

   data() {
     return {
       message: ''
     }
   }

2. 手动实现双向绑定 通过 :value 绑定数据，@input 监听事件：

   <input :value="text" @input="text = $event.target.value" />

单向绑定实现

1. 插值表达式 {{ }} 数据变化自动更新视图：

   <p>{{ title }}</p>

2. v-bind 指令 动态绑定属性：

   <a v-bind:href="url">Link</a>
   <!-- 简写 -->
   <a :href="url">Link</a>

响应式原理

1. Object.defineProperty（Vue 2） 通过劫持数据属性的 getter/setter 实现监听：

   function defineReactive(obj, key, val) {
     Object.defineProperty(obj, key, {
       get() {
         return val;
       },
       set(newVal) {
         if (newVal !== val) {
           val = newVal;
           console.log('数据已更新');
         }
       }
     });
   }

2. Proxy（Vue 3） 直接代理整个对象，性能更优：

   const reactive = (target) => {
     return new Proxy(target, {
       get(target, key) {
         return Reflect.get(target, key);
       },
       set(target, key, value) {
         Reflect.set(target, key, value);
         console.log('数据已更新');
         return true;
       }
     });
   };

动态类名绑定

1. 对象语法 根据布尔值切换类名：

   <div :class="{ active: isActive, 'text-danger': hasError }"></div>

2. 数组语法 绑定多个类名：

   <div :class="[activeClass, errorClass]"></div>

样式绑定

1. 内联样式对象

   <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2. 样式数组 应用多个样式对象：

   <div :style="[baseStyles, overridingStyles]"></div>

高级绑定技巧

1. 计算属性 复杂逻辑推荐使用计算属性：

   computed: {
     fullName() {
       return this.firstName + ' ' + this.lastName;
     }
   }

2. 监听器 响应数据变化执行异步操作：

   

   watch: {
     message(newVal, oldVal) {
       console.log('消息变化:', newVal);
     }
   }

以上方法覆盖了 Vue 数据绑定的核心场景，根据需求选择合适的方式即可。