面试题：如何基于Vue内置指令的原理扩展一个自定义双向绑定指令

Question

假设你要扩展一个自定义的双向绑定指令v - myModel，使其能像v - model一样工作，阐述实现思路并给出关键代码片段。需要考虑指令的绑定、更新以及与Vue数据响应式系统的集成等方面。

Answer 1

实现思路

1. 指令绑定：在指令的 bind 钩子函数中，获取绑定的元素和表达式，并设置初始值。
2. 更新：通过 input 事件监听元素值的变化，更新 Vue 实例的数据；同时，当 Vue 实例数据变化时，更新元素的值。
3. 与 Vue 数据响应式系统集成：利用 Vue 的 defineProperty 或 Proxy 机制来实现数据的响应式，确保数据变化时能正确更新视图。

关键代码片段

Vue.directive('myModel', {
  bind: function (el, binding) {
    // 设置初始值
    el.value = binding.value;
    // 监听input事件
    el.addEventListener('input', function () {
      // 更新Vue实例的数据
      binding.value = el.value;
    });
  },
  update: function (el, binding) {
    // 当Vue实例数据变化时，更新元素的值
    el.value = binding.value;
  }
});

在上述代码中：

• bind 钩子函数中，给元素设置初始值，并监听 input 事件，事件触发时更新 Vue 实例的数据。
• update 钩子函数在 Vue 实例数据变化时，更新元素的值，从而实现双向绑定。