面试题：自定义v-model在文本框和复选框高级应用及性能优化

实现思路

自定义文本框组件：在文本框组件内部维护一个数据变量存储输入值，通过input事件触发父组件传递进来的更新函数，实现数据向上传递。同时接收父组件通过props传递的初始值，更新内部数据变量。
自定义复选框组件：类似地，内部维护一个数据变量表示复选框的勾选状态，通过change事件触发父组件更新函数，接收父组件通过props传递的初始值。
自定义v - model：在组件上使用自定义v - model，其实质是通过props接收值，通过触发特定事件来更新父组件的值。在组件定义时，通过model选项指定prop和event，这样在使用v - model时就可以按照自定义的规则进行双向绑定。

关键代码

自定义文本框组件

<template>
  <input :value="inputValue" @input="handleInput">
</template>

<script>
export default {
  name: 'CustomInput',
  model: {
    prop: 'value',
    event: 'inputChange'
  },
  props: {
    value: String
  },
  data() {
    return {
      inputValue: this.value
    };
  },
  methods: {
    handleInput(e) {
      this.inputValue = e.target.value;
      this.$emit('inputChange', this.inputValue);
    }
  }
};
</script>

自定义复选框组件

<template>
  <input type="checkbox" :checked="checkboxValue" @change="handleChange">
</template>

<script>
export default {
  name: 'CustomCheckbox',
  model: {
    prop: 'checked',
    event: 'changeChecked'
  },
  props: {
    checked: Boolean
  },
  data() {
    return {
      checkboxValue: this.checked
    };
  },
  methods: {
    handleChange(e) {
      this.checkboxValue = e.target.checked;
      this.$emit('changeChecked', this.checkboxValue);
    }
  }
};
</script>

使用组件

<template>
  <div>
    <CustomInput v-model="inputText"></CustomInput>
    <CustomCheckbox v-model="isChecked"></CustomCheckbox>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';
import CustomCheckbox from './CustomCheckbox.vue';

export default {
  components: {
    CustomInput,
    CustomCheckbox
  },
  data() {
    return {
      inputText: '',
      isChecked: false
    };
  }
};
</script>

性能优化

使用v - on的修饰符：如@input.throttle或@input.debounce，对文本框的input事件进行节流或防抖处理，减少事件触发频率，从而降低计算消耗。
虚拟DOM复用：Vue内部通过虚拟DOM来进行高效的更新，尽量减少直接操作真实DOM。在大量组件渲染时，Vue会智能地对比虚拟DOM树的变化，只更新必要的部分，开发者应避免手动操作DOM破坏这种优化机制。
动态组件与异步组件：如果某些组件不是一开始就需要渲染，可以使用动态组件（<component :is="currentComponent"></component>）或异步组件（import('./AsyncComponent.vue')），在需要时才加载和渲染，减少初始渲染的压力。
优化数据绑定：避免在模板中进行复杂的计算，将计算逻辑提取到computed属性中，并且computed属性依赖的数据应尽量精简，这样当依赖数据变化时，Vue能更高效地判断是否需要重新计算。

星途面试题库

面试题：自定义v-model在文本框和复选框高级应用及性能优化

知识考点

面试题答案

实现思路

关键代码

自定义文本框组件

自定义复选框组件

使用组件

性能优化