每日一篇——VUE面经（6）

⭐说一说mixin

在 Vue 中，mixin 是一种重用组件选项的方式。它允许将公共的逻辑、属性和方法提取出来，并混入到多个组件中。

使用方式：

1. 创建一个 mixin 对象，包含要混入的选项，例如 data、methods、computed、watch 和生命周期钩子。
2. 在组件中使用 mixins 选项将 mixin 对象混入。

下面是一个示例：

<!-- myMixin.js -->
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
    }
  },
  computed: {
    doubledCounter() {
      return this.counter * 2;
    }
  },
  watch: {
    counter(newValue) {
      console.log('Counter changed:', newValue);
    }
  },
  created() {
    console.log('Mixin created');
  }
};
​

<!-- MyComponent.vue -->
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <p>Doubled Counter: {{ doubledCounter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
​
<script>
import myMixin from './myMixin.js';
​
export default {
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
};
</script>

在上述示例中，myMixin.js 定义了一个 mixin 对象，其中包含了 data、methods、computed、watch 和 created 生命周期钩子。然后，我们通过在组件的 mixins 选项中指定这个 mixin 对象，将其混入到组件中。

在组件 MyComponent.vue 中，我们可以直接使用混入的 data、methods、computed 和 watch。同时，组件的生命周期钩子和 mixin 的生命周期钩子都会被调用。

当 mixin 和组件具有相同的选项时，Vue 会通过一定规则进行合并：

• 替换型策略：props、methods、inject 和 computed。当 mixin 和组件具有相同的选项时，组件会覆盖 mixin 的选项。这意味着组件提供的选项会取代 mixin 中的选项。
• 合并型策略：data。当 mixin 和组件都有 data 选项时，Vue 会通过调用 Object.assign() 将两个对象合并为一个新的对象。这样做的目的是确保组件和 mixin 都可以访问到各自的 data。如果两个对象中有相同的属性，组件的值将覆盖 mixin 的值。
• 队列型策略：生命周期函数（如 created、mounted 等）和 watch。当 mixin 和组件具有相同的生命周期钩子或 watch 监听器时，它们都会被调用。具体的执行顺序是，首先执行 mixin 的钩子或监听器，然后再执行组件的钩子或监听器。这样可以确保 mixin 和组件都能正常运行，并且 mixin 的逻辑与组件的逻辑能够顺序执行。
• 叠加型策略：components、directives 和 filters。这些选项是通过原型链进行叠加的，意味着组件和 mixin 都可以访问到它们。如果 mixin 和组件具有相同名称的组件、指令或过滤器，它们会被叠加在一起，组成一个新的数组。这样做的目的是将 mixin 和组件的功能进行组合，使它们共同生效。

⭐说说vue中常用的修饰符

事件修饰符：

1. .prevent：阻止默认事件

   • 应用场景：在表单提交时阻止默认刷新页面的行为。

   <form @submit.prevent="handleSubmit">
     <!-- 表单内容 -->
   </form>
   

2. .stop：停止事件冒泡

   • 应用场景：停止事件冒泡，防止事件从当前元素向父元素传播。它可以阻止事件传递给更上层的元素，只在当前元素上执行绑定的事件处理函数。

   <div @click="handleDivClick">
    <!--只会执行button上的方法-->   
     <button @click.stop="handleButtonClick">按钮</button>
   </div>
   

3. .once：只触发一次事件

   • 应用场景：确保事件只会被触发一次，之后不再响应。

   <button @click.once="handleButtonClick">点击一次</button>
   

4. .capture：使用捕获模式监听事件

   • 应用场景：从外至内触发事件。

   <div @click.capture="handleDivClick">
     <button @click="handleButtonClick">按钮</button>
   </div>
   

5. .self：只在事件目标自身触发时才执行

   • 应用场景：仅当事件发生在元素自身时才执行相应的处理函数。

   <div @click.self="handleDivClick">
     <button @click="handleButtonClick">按钮</button>
   </div>
   

6. .keyCode：监听特定按键触发事件

   • 应用场景：根据按下的键盘按键来触发特定的事件。

   <input @keydown.enter="handleEnterKey">
   

7. .passive ：当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件使用了一个.lazy修饰符

   <div @scroll.passive="handleScroll">
     <!-- 内容 -->
   </div>
   

   在上述示例中，@scroll.passive 表示监听 div 元素的滚动事件，并使用 .passive 修饰符。这样在滚动过程中，浏览器将以非阻塞的方式执行事件处理函数 handleScroll，提高页面的滚动性能。

   需要注意的是，.passive 修饰符只在支持 addEventListener 第三个参数选项的浏览器中生效。对于不支持的浏览器，.passive 修饰符将被忽略，事件仍然以常规方式进行处理。

8. .native：使用native修饰符我们可以为自定义组件绑定原生事件

   <custom-component v-on:click.native="handleClick"></custom-component>
   

   如果不使用native，这样绑定的点击事件就无法触发，因为custom-component本质上并不是一个dom，只能通过自定义事件的形式为子组件绑定dom

鼠标按钮修饰符：

• left 左键点击
• right 右键点击
• middle 中键点击

<button @click.left="handleClick">ok</button>
<button @click.right="handleClick">ok</button>
<button @click.middle="handleClick">ok</button>

键盘修饰符：

键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：

keyCode存在很多，但vue为我们提供了别名，分为以下两种：

• 普通键（enter、tab、delete、space、esc、up...）
• 系统修饰键（ctrl、alt、meta、shift...）

// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="handleKeydown">

还可以通过以下方式自定义一些全局的键盘码别名

Vue.config.keyCodes.f2 = 113

表单修饰符：

1、.lazy：默认情况下，在 input、textarea 和 select 元素上使用 v-model 会在每次输入时更新绑定的数据。通过添加 .lazy 修饰符，可以改为在失去焦点或按下回车键时再更新数据。

<input v-model.lazy="message" />

2、.number：将用户输入值转换为数字类型。如果使用 v-model 绑定一个 input 元素，用户输入的内容将自动被转换为数字类型。

<input v-model.number="age" type="number" />

3、.trim：自动去除用户输入的首尾空格。

<input v-model.trim="username" type="text" />

4、.prevent：阻止默认的表单提交行为，防止提交时刷新页面。通常用于在提交表单之前进行验证或处理后再提交。

<form @submit.prevent="submitForm">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

v-bind修饰符：

1. .prop 修饰符：

   <child-component v-bind:child-prop.prop="parentData"></child-component>
   

   在这个示例中，.prop 修饰符用于绑定父组件的 parentData 数据到子组件的 child-prop prop 属性上。

2. .camel 修饰符：

   <my-component v-bind:my-attribute.camel="value"></my-component>
   

   使用 .camel 修饰符时，v-bind 将自动将 my-attribute 转换为驼峰命名的属性名，然后绑定到组件上。例如绑定到 myComponent 组件的 myAttribute 属性。

3. .sync 修饰符：

   <custom-input v-bind:value.sync="inputValue"></custom-input>
   

   使用 .sync 修饰符时，数据的双向绑定会更加方便。在这个示例中，custom-input 组件接收来自父组件的 inputValue 数据，并且可以修改该值。任何对 inputValue 的修改都会反映到父组件的数据中。

4. .once 修饰符：

   <div v-bind:id.once="dynamicId"></div>
   

   使用 .once 修饰符时，绑定的值只会被解析一次，不会随后续数据变化而更新。这在某些情况下可以提高性能。

另外，v-bind 还可以通过 JavaScript 表达式动态绑定多个属性，例如：

<div v-bind="{ id: dynamicId, class: dynamicClass }"></div>