面试题：Angular自定义指令之交互实现

Question

创建一个结构性自定义指令，该指令能够在DOM元素加载时，从外部数据源获取数据并动态渲染在该元素内。要求处理异步数据获取，并且当数据源数据变化时，指令能自动更新渲染内容。请阐述实现思路并给出核心代码。

Answer 1

实现思路

1. 创建自定义指令：使用Vue.js（假设基于Vue，也可类比到其他框架）的directive API来创建一个自定义指令。
2. 数据获取：在指令的inserted钩子函数（元素插入到DOM后触发）中，通过async/await或Promise来处理异步数据获取，例如使用fetch获取外部数据源数据。
3. 动态渲染：获取到数据后，更新指令绑定元素的innerHTML或使用Vue的响应式数据更新机制来渲染数据。
4. 数据变化监听：使用Vue的依赖追踪机制（例如计算属性或watch）来监听数据源数据变化，当数据变化时重新获取并更新渲染。

核心代码（基于Vue.js）

<template>
  <div v-get-data="url"></div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com/api/data'
    };
  },
  directives: {
    getData: {
      inserted: async function (el, binding) {
        try {
          const response = await fetch(binding.value);
          const data = await response.json();
          el.innerHTML = JSON.stringify(data);
        } catch (error) {
          el.innerHTML = `Error: ${error.message}`;
        }
      }
    }
  }
};
</script>

若要处理数据源数据变化自动更新，可如下修改：

<template>
  <div v-get-data="dynamicUrl"></div>
</template>

<script>
export default {
  data() {
    return {
      dynamicUrl: 'https://example.com/api/data'
    };
  },
  watch: {
    dynamicUrl: {
      immediate: true,
      async handler(newUrl) {
        const el = this.$el.querySelector('[v-get-data]');
        try {
          const response = await fetch(newUrl);
          const data = await response.json();
          el.innerHTML = JSON.stringify(data);
        } catch (error) {
          el.innerHTML = `Error: ${error.message}`;
        }
      }
    }
  },
  directives: {
    getData: {
      inserted: async function (el, binding) {
        try {
          const response = await fetch(binding.value);
          const data = await response.json();
          el.innerHTML = JSON.stringify(data);
        } catch (error) {
          el.innerHTML = `Error: ${error.message}`;
        }
      }
    }
  }
};
</script>