Vue 进阶面试题, 请手写一个自定义指令,并描述如何调用它?

Step 1

Q:: 请手写一个自定义指令，并描述如何调用它？

A:: 在 Vue.js 中，自定义指令可以用于直接操作 DOM 元素。以下是一个简单的例子，手写一个自定义指令 v-focus，这个指令的作用是在元素挂载到 DOM 时自动聚焦：

 
Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});
 

调用方式如下：

 
<input v-focus />
 

在这个例子中，v-focus 指令会在 input 元素插入到 DOM 后，自动让它获得焦点。

Step 2

Q:: 如何在自定义指令中使用钩子函数？请列举并解释不同的钩子函数。

A:: Vue.js 的自定义指令支持多个钩子函数，可以让你在不同的生命周期阶段操作 DOM 元素。主要的钩子函数有：

- bind(el, binding, vnode)``: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 - inserted(el, binding, vnode)``: 当绑定元素插入到 DOM 中时调用。 - update(el, binding, vnode, oldVnode)``: 所在组件的 VNode 更新时调用，但可能发生在其子 VNode 更新之前。 - componentUpdated(el, binding, vnode, oldVnode)``: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 - unbind(el, binding, vnode)``: 只调用一次，指令与元素解绑时调用。

Step 3

Q:: 如何在自定义指令中传递参数？请给出示例。

A:: 在 Vue.js 中，可以通过指令的绑定值和参数来传递数据。举个例子，假设我们想创建一个指令，可以控制元素的背景色：

 
Vue.directive('color', {
  bind(el, binding) {
    el.style.backgroundColor = binding.value;
  }
});
 

使用这个指令时，我们可以这样传递颜色参数：

 
<div v-color="'yellow'"></div>
 

这里，binding.value 的值就是 'yellow'，指令会将该值应用为背景色。