面试题：Vue自定义指令如何实现类似v - model的双向绑定功能

双向绑定原理

在Vue中，双向绑定是通过数据劫持结合发布者 - 订阅者模式实现的。Vue利用Object.defineProperty()方法对数据进行劫持，当数据变化时，通知订阅者（即视图）进行更新。而视图的变化也会反过来更新数据，从而实现双向绑定。

指令内部钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

与组件数据交互

通过指令的参数和绑定的值，指令可以获取到组件的数据。在钩子函数中，可以根据组件数据的变化来更新元素的状态，同时也可以通过监听元素的事件来更新组件的数据。

代码示例

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

<script>
export default {
  data() {
    return {
      message: '初始值'
    }
  },
  directives: {
    'my-model': {
      bind(el, binding) {
        el.value = binding.value;
        el.addEventListener('input', function () {
          binding.value = el.value;
          const event = new CustomEvent('input', {
            detail: el.value
          });
          el.dispatchEvent(event);
        });
      },
      update(el, binding) {
        el.value = binding.value;
      }
    }
  }
}
</script>

在上述代码中：

组件结构：包含一个input输入框和一个p标签，输入框使用自定义指令v-my-model绑定message数据。
数据定义：在组件的data函数中定义了message数据。
指令定义：自定义了my-model指令，在bind钩子函数中初始化输入框的值，并添加input事件监听器，当输入框内容变化时更新组件数据；在update钩子函数中，当组件数据变化时更新输入框的值。

星途面试题库

面试题：Vue自定义指令如何实现类似v - model的双向绑定功能

知识考点

面试题答案

双向绑定原理

指令内部钩子函数

与组件数据交互

代码示例