深入浅出解析 Vue 概念（二）：.exact 修饰符

2023-10-11 05:52:05

Vue 中的 .exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。系统修饰符是一些预定义的修饰符，如 .alt、.ctrl、.meta 和 .shift。当你想监听一个只有在特定的系统修饰符组合按下时才会触发的事件时，你可以使用 .exact 修饰符。

例如，以下代码将监听一个只有在按下 Command 和 Shift 键时才会触发的点击事件：

<button @click.exact.ctrl.shift="handleClick">点击我</button>

.exact 修饰符是如何工作的？

.exact 修饰符的工作原理很简单。当它被添加到一个事件监听器时，它会确保只有在所有指定的系统修饰符都被按下时，该事件才会触发。这意味着，即使你按下了其他键，只要你没有按下所有指定的系统修饰符，事件就不会触发。

什么时候使用 .exact 修饰符？

你应该在以下情况下使用 .exact 修饰符：

你想监听一个只有在特定的系统修饰符组合按下时才会触发的事件。
你想防止意外触发事件。例如，如果你有一个按钮，你只想在用户按下 Command 和 Shift 键时才触发点击事件，那么你可以使用 .exact 修饰符来确保只有在用户按下这两个键时才会触发该事件。

实际例子

以下是一些实际例子，展示了如何使用 .exact 修饰符：

表单验证： 你可以使用 .exact 修饰符来确保只有在用户输入了正确的值时才会提交表单。例如，以下代码将监听一个只有在用户输入了正确的电子邮件地址时才会触发的提交事件：

<form @submit.exact.ctrl.enter="handleSubmit">
  <input type="email" name="email">
  <input type="submit" value="提交">
</form>

导航： 你可以使用 .exact 修饰符来确保只有在用户点击了正确的链接时才会导航到另一个页面。例如，以下代码将监听一个只有在用户点击了“主页”链接时才会触发的点击事件：

<a href="/" @click.exact="handleClick">主页</a>

组件： 你可以使用 .exact 修饰符来确保只有在组件收到了正确的数据时才会更新。例如，以下代码将监听一个只有在组件收到了新的消息时才会触发的更新事件：

export default {
  data() {
    return {
      messages: []
    }
  },
  methods: {
    updateMessages(newMessages) {
      this.messages = newMessages
    }
  },
  watch: {
    messages: {
      handler(newMessages) {
        // 只有在收到了新的消息时才会执行此函数
        this.updateMessages(newMessages)
      },
      deep: true,
      exact: true
    }
  }
}