如何在Vue自定义指令中实现类似v-model的响应式数据绑定？

问题背景 #

使用Vue的v-model可以轻松实现响应式属性与表单元素的双向绑定，但自定义指令中直接通过binding.value无法实现相同效果：

• binding.value是源数据的副本，修改它不会同步回组件
• 输入事件中直接赋值binding.value无效

核心原因 #

binding对象是Vue内部传递的只读对象，binding.value仅为当前绑定值的快照，并非响应式引用，因此无法直接通过它修改源数据。

解决方案 #

方案1：解析绑定表达式修改源数据 #

通过vnode.context（组件实例）和binding.expression（绑定的表达式字符串），直接修改组件的响应式属性：

directives: {
  'custom-input': {
    created(el, binding, vnode) {
      // 初始化DOM值
      el.value = binding.value;
      
      // 监听输入事件，同步回源数据
      el.addEventListener('input', () => {
        // 针对嵌套属性的通用解析（支持多层嵌套）
        const setProp = (ctx, expr, value) => {
          const keys = expr.split('.');
          const target = keys.slice(0, -1).reduce((acc, key) => acc[key], ctx);
          target[keys.pop()] = value;
        };
        setProp(vnode.context, binding.expression, el.value);
      });
    },
    // 源数据更新时同步DOM
    updated(el, binding) {
      if (el.value !== binding.value) {
        el.value = binding.value;
      }
    },
    // 清理事件监听
    unmounted(el) {
      el.removeEventListener('input', null);
    }
  }
}

方案2：传入带回调的配置对象（更灵活） #

模仿v-model的value+input事件设计，让指令接收包含值和回调的对象：

<!-- 使用方式 -->
<input v-custom-input="{ 
  value: myObject.property, 
  onChange: (val) => myObject.property = val 
}" />

directives: {
  'custom-input': {
    created(el, binding) {
      el.value = binding.value.value;
      
      el.addEventListener('input', () => {
        binding.value.onChange(el.value);
      });
    },
    updated(el, binding) {
      if (el.value !== binding.value.value) {
        el.value = binding.value.value;
      }
    },
    unmounted(el) {
      el.removeEventListener('input', null);
    }
  }
}

方案3：使用$watch监听源数据（推荐复杂场景） #

通过组件实例的$watch方法监听绑定表达式，实现自动同步：

directives: {
  'custom-input': {
    created(el, binding, vnode) {
      el.value = binding.value;
      
      // 输入事件同步回源数据
      el.addEventListener('input', () => {
        const keys = binding.expression.split('.');
        const targetObj = keys.slice(0, -1).reduce((acc, key) => acc[key], vnode.context);
        targetObj[keys.pop()] = el.value;
      });
      
      // 监听源数据变化，自动更新DOM
      const unwatch = vnode.context.$watch(binding.expression, (newVal) => {
        el.value = newVal;
      });
      
      // 组件卸载时清理监听
      vnode.context.$once('hook:beforeUnmount', unwatch);
    },
    unmounted(el) {
      el.removeEventListener('input', null);
    }
  }
}

注意事项 #

• 必须在unmounted钩子中清理事件监听和$watch，避免内存泄漏
• 解析嵌套属性时要处理可能的undefined情况，可添加容错逻辑
• Vue 3中vnode.context对应组件的Proxy实例，用法与Vue 2一致

内容的提问来源于stack exchange，提问作者Delcon