如何在单次点击事件中执行多个表达式？@click绑定多语句执行问题

问题原因 #

你遇到的现象本质是同一次点击内，name(data)拿到的是data赋值前的旧值，第一次点击仅完成data的状态更新，第二次点击时name才能读取到更新后的值，所以看起来需要点击两次才能执行完两个操作，核心诱因有两个：

• 你的data是Vue的响应式状态（通过ref/reactive/选项式data选项定义），模板内联表达式对响应式变量赋值后，同表达式内后续的变量读取不会触发最新值的解析逻辑，拿到的依旧是执行表达式前的旧值。
• Vue的模板内联事件处理器仅设计用于承载单个简单表达式，直接用逗号拼接多表达式的写法不符合编译器预期，部分场景下会出现执行顺序异常。

解决方案 #

不要把多步操作直接写在内联事件属性中，单独封装一个点击处理函数，把逻辑都放到函数内部执行即可：

// 示例为Vue3 <script setup> 写法，选项式API同理封装methods即可
import { ref } from 'vue'
const data = ref(false)

// 封装统一的点击处理逻辑
const handleClick = () => {
  data.value = true
  name(data.value) // 这里直接读取赋值后的最新值传递给name函数
}

const name = (val) => {
  // 你的原有业务逻辑
}

模板修改为绑定封装后的函数：

<button @click="handleClick">

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