面试题：Vue修饰符：修饰符在复杂组件交互中的优化

Question

在一个大型Vue项目中，存在多个复杂组件相互嵌套和交互。假设在这些组件的事件绑定和数据双向绑定过程中，需要使用修饰符来提升代码可读性与功能性。请描述一个具体的复杂场景，说明如何运用修饰符（包括默认修饰符和自定义修饰符）来优化代码结构，提升可维护性，并写出关键代码片段以及设计思路。

Answer 1

复杂场景描述

假设我们有一个电商后台管理系统，其中有一个商品编辑页面。页面中有一个商品详情组件，内部嵌套了价格设置子组件、库存设置子组件以及图片上传子组件。在价格设置子组件中，用户可以输入商品价格，同时需要限制输入只能是数字，并且在失去焦点时自动格式化价格显示。库存设置子组件中，用户输入库存数量，输入必须为正整数，并且在按下回车键时触发库存更新操作。图片上传子组件中，用户选择图片后要立即进行尺寸校验，并且在上传成功后更新商品图片展示。

运用修饰符优化代码结构

默认修饰符

1. 价格设置子组件
   • 设计思路：使用 v-model 双向绑定输入值，利用 number 修饰符确保输入为数字类型，trim 修饰符去除输入两端空格，blur 事件结合 lazy 修饰符在失去焦点时格式化价格。
   • 关键代码片段：

<template>
  <div>
    <input v-model.number.trim.lazy="price" @blur="formatPrice" placeholder="请输入商品价格">
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: ''
    };
  },
  methods: {
    formatPrice() {
      this.price = parseFloat(this.price).toFixed(2);
    }
  }
};
</script>

2. 库存设置子组件
   • 设计思路：v-model 双向绑定库存数量，number 修饰符确保输入为数字，通过自定义指令配合 keydown.enter 事件在按下回车键时触发库存更新。
   • 关键代码片段：

<template>
  <div>
    <input v-model.number="stock" @keydown.enter="updateStock" placeholder="请输入库存数量">
  </div>
</template>

<script>
export default {
  data() {
    return {
      stock: ''
    };
  },
  methods: {
    updateStock() {
      if (this.stock > 0) {
        // 调用库存更新接口
        console.log('库存更新为：', this.stock);
      }
    }
  }
};
</script>

自定义修饰符

1. 图片上传子组件
   • 设计思路：自定义一个 imageSizeCheck 修饰符，用于在图片选择后立即校验图片尺寸。在 input 元素的 change 事件中触发校验逻辑。
   • 注册自定义指令：

Vue.directive('imageSizeCheck', {
  inserted: function (el, binding) {
    el.addEventListener('change', function (e) {
      const file = e.target.files[0];
      if (file) {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = function () {
          // 假设最大宽度和高度为800px
          if (img.width <= 800 && img.height <= 800) {
            // 尺寸校验通过，执行上传逻辑
            console.log('图片尺寸校验通过，执行上传');
          } else {
            console.log('图片尺寸过大');
          }
        };
      }
    });
  }
});

- **使用自定义指令**：

<template>
  <div>
    <input type="file" v-imageSizeCheck>
  </div>
</template>

通过以上使用默认修饰符和自定义修饰符的方式，可以在复杂的组件交互场景中优化代码结构，提升代码的可读性与可维护性。每个组件的功能通过修饰符清晰地表达出来，使得代码逻辑更加直观，便于后续的开发与维护。