面试题：Vue指令封装及在项目复杂业务场景下的高效应用

1. 自定义Vue指令的设计与实现

<template>
  <div>
    <ul>
      <li v-for="(product, index) in products" :key="index" v-product-status="product.status">
        {{ product.name }} - {{ product.status }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '商品1', status: 'active' },
        { name: '商品2', status: 'inactive' },
        { name: '商品3', status: 'onSale' }
      ]
    };
  },
  directives: {
    'product-status': {
      inserted(el, binding) {
        const status = binding.value;
        let className;
        let clickHandler;

        if (status === 'active') {
          className = 'active-product';
          clickHandler = function() {
            console.log('激活商品被点击');
          };
        } else if (status === 'inactive') {
          className = 'inactive-product';
          clickHandler = function() {
            console.log('非激活商品被点击');
          };
        } else if (status === 'onSale') {
          className = 'on-sale-product';
          clickHandler = function() {
            console.log('促销商品被点击');
          };
        }

        el.classList.add(className);
        el.addEventListener('click', clickHandler);
      },
      unbind(el) {
        el.removeEventListener('click', el._clickHandler);
      }
    }
  }
};
</script>

<style scoped>
.active-product {
  color: green;
}

.inactive-product {
  color: gray;
}

.on-sale-product {
  color: red;
}
</style>

2. 指令在项目中的注册策略

局部注册：如上述代码示例，在组件内部通过 directives 选项进行局部注册。适用于仅在特定组件中使用该指令的情况，优点是作用域明确，不会污染全局命名空间。

export default {
  directives: {
    'product-status': {
      // 指令定义
    }
  }
};

全局注册：在 main.js 中使用 Vue.directive 进行全局注册。适用于在多个组件中频繁使用该指令的场景。

import Vue from 'vue';
import App from './App.vue';

Vue.directive('product-status', {
  inserted(el, binding) {
    // 指令逻辑
  },
  unbind(el) {
    // 解绑逻辑
  }
});

new Vue({
  render: h => h(App)
}).$mount('#app');

3. 指令在项目中的使用策略

在模板中使用指令时，通过 v-指令名 的形式绑定到相应的元素上，并传递需要的参数，如商品状态。

<li v-for="(product, index) in products" :key="index" v-product-status="product.status">
  {{ product.name }} - {{ product.status }}
</li>

4. 指令在项目中的维护策略

代码结构清晰：指令的逻辑应尽量简洁明了，将不同状态的处理逻辑模块化，方便阅读和维护。例如，上述代码中根据不同状态分别处理类名和点击事件。
文档注释：为指令添加详细的注释，说明指令的功能、参数含义以及使用场景，方便其他开发人员理解和使用。

// 商品状态自定义指令
// 功能：根据商品状态动态添加类名和绑定点击事件
// 参数：商品状态值
Vue.directive('product-status', {
  inserted(el, binding) {
    // 指令逻辑
  },
  unbind(el) {
    // 解绑逻辑
  }
});

版本控制：使用版本控制系统（如Git）记录指令的修改历史，便于追踪问题和回滚到之前的版本。

星途面试题库

面试题：Vue指令封装及在项目复杂业务场景下的高效应用

知识考点

面试题答案

1. 自定义Vue指令的设计与实现

2. 指令在项目中的注册策略

3. 指令在项目中的使用策略

4. 指令在项目中的维护策略