Vue组件@mouseover事件直接修改data内hover变量值不生效问题

问题表现 #

开发Vue组件时遇到hover事件相关异常：mouseover事件触发时调用自定义函数可正常执行，但无法直接在事件绑定表达式中修改定义在data中的hover响应式变量值。
初始实现代码：

<template>
    <div @mouseover="hover = true"
         @mouseleave="hover = false"
        class="dot" style="width: 50px; height: 50px; background-color: darkgreen">
    </div>

</template>

<script>
export default {
  name: "InteractiveDotComponent",
  data(){
    return {
      hover: false // hover时该值不会变更
    }
  }
}
</script>

<style scoped>

</style>

尝试改用this访问变量再赋值依然无法生效，写法如下：

@mouseover="this.hover = true"

根本原因 #

• Vue模板内的表达式执行上下文是组件实例的代理对象，本身不需要手动加this访问实例属性，额外加this反而会导致属性寻址失败，因为模板上下文里的this并非指向当前组件实例。
• 直接在事件绑定行内写顶层赋值语句不生效，是Vue模板编译器的解析限制：行内表达式仅支持变量读取、方法调用类操作，直接对响应式变量做顶层赋值的写法不会被正确代理到响应式更新流程，部分Vue2版本还会在编译阶段对这类静态赋值表达式提前求值，导致事件实际触发时根本不会执行赋值动作。

修复方案 #

• 方案1：封装方法调用（全版本兼容，最稳妥）
  把赋值逻辑封装到methods方法中，事件绑定直接调用对应方法，这也是Vue官方推荐的事件写法：

  <template>
      <div @mouseover="setHover(true)"
           @mouseleave="setHover(false)"
          class="dot" style="width: 50px; height: 50px; background-color: darkgreen">
      </div>
  </template>
  
  <script>
  export default {
    name: "InteractiveDotComponent",
    data(){
      return {
        hover: false
      }
    },
    methods: {
      setHover(status) {
        this.hover = status
      }
    }
  }
  </script>
  

• 方案2：纯样式hover场景直接用CSS实现（无状态开销）
  如果只是要实现hover态的样式变化，完全不需要维护额外的响应式变量，直接用CSS:hover选择器即可，性能更好：

  <template>
      <div class="dot">
      </div>
  </template>
  
  <style scoped>
  .dot {
    width: 50px;
    height: 50px;
    background-color: darkgreen;
  }
  .dot:hover {
    /* 写hover态需要的样式即可，比如修改背景色 */
    background-color: forestgreen;
  }
  </style>
  

开发提示：不要在模板行内事件里写复杂表达式、赋值语句，这类写法不仅容易出现响应式不更新的问题，也不利于后续维护，事件逻辑超过1行时统一封装到methods里是Vue开发的通用最佳实践。

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