Vue.js中@click事件使用箭头函数是否安全、符合最佳实践？

Great question! Let's break this down step by step to cover all your concerns.

Is this approach safe? #

First off: yes, this syntax is technically safe—Vue won't throw errors, and the code will execute as expected. But while it works, it's definitely not aligned with Vue's best practices, and here's why:

Why it's not a best practice #

• Poor readability: Shoving multiple lines of logic directly into the template makes your markup cluttered and hard to scan. Other developers (or future you) will have to dig through template code to understand what the button does, instead of looking at a dedicated method/function in the script section.
• No reusability: The logic inside the arrow function is tied directly to this specific button. If you need the same sequence of actions elsewhere in your component (or app), you'll have to copy-paste the code, violating the DRY (Don't Repeat Yourself) principle.
• Harder debugging: Debugging template-based logic is trickier—you can't easily set breakpoints on the arrow function, and error stack traces might be less clear compared to logic in a dedicated function.
• Unnecessary performance overhead: Every time your component re-renders, a new instance of that arrow function is created. While this is a minor issue for a single button, it can add up if you use this pattern in loops with many items.

Can you pass parameters to the arrow function? #

Absolutely! You can pass any available context variables (like loop items) or the native event object to the arrow function. For example:

<!-- Passing the native event and a loop item -->
<btn 
  v-for="item in items" 
  :key="item.id"
  @click="(event)=> {
    variable = '5'; 
    myFunction(variable); 
    myFunction2(event.target.textContent); 
    $emit('argument', myFunction3(item))
  }"
>
  Run functions for {{ item.name }}!
</btn>

You can also omit the event parameter if you don't need it, or pass any other values that are accessible in the template scope.

The Recommended Alternative #

Instead of putting logic directly in the template, move all those actions into a dedicated function in your script section. This keeps your template clean, your logic organized, and makes debugging/reusability easier.

Option API Example: #

<template>
  <btn @click="handleButtonClick">Run functions!</btn>
</template>

<script>
export default {
  data() {
    return {
      variable: ''
    }
  },
  methods: {
    handleButtonClick() {
      this.variable = '5';
      this.myFunction(this.variable);
      this.myFunction2('something');
      this.$emit('argument', this.myFunction3());
    },
    myFunction(val) {
      // Your logic here
    },
    myFunction2(val) {
      // Your logic here
    },
    myFunction3() {
      // Your logic here
      return someValue;
    }
  }
}
</script>

Composition API Example: #

<template>
  <btn @click="handleButtonClick">Run functions!</btn>
</template>

<script setup>
import { ref } from 'vue';

const variable = ref('');
const emit = defineEmits(['argument']);

const myFunction = (val) => {
  // Your logic here
};
const myFunction2 = (val) => {
  // Your logic here
};
const myFunction3 = () => {
  // Your logic here
  return someValue;
};

const handleButtonClick = () => {
  variable.value = '5';
  myFunction(variable.value);
  myFunction2('something');
  emit('argument', myFunction3());
};
</script>

内容的提问来源于stack exchange，提问作者gileneusz