为什么每次悬停时都会调用v-hover内部的函数答案

【问题标题】：Why the function that inside the v-hover is called every times whenever hovering为什么每次悬停时都会调用v-hover内部的函数
【发布时间】：2021-08-05 12:46:26
【问题描述】：

每当悬停在 v-sheet 上时，都会调用 v-hover 内的 getBlueColor() 函数。为什么会这样？

示例代码

<template>
  <v-row justify="center" align="center">
    <v-hover v-slot="{ hover }">
      <v-sheet width="100" height="100" style="border: white" :style="hover ? 'background-color: white' : ''">
        <span :style="getRedColor()"> why </span>
      </v-sheet>
    </v-hover>
  </v-row>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  methods: {
    test() {
      console.log('test')
    },
    getBlueColor() {
      console.log('Call function')
      return 'color:blue;'
    },
  },
})
</script>

这是在 v-sheet 上悬停 5 次后的结果

(10) 调用函数func.getBlueColor

【问题讨论】：

这是 vue 设计的意图：方法是要被调用的，并且直接将它们注入到视图中会产生这种行为。您应该使用computed properties，data 属性，或者更好（查看上下文）class and style bindings
非常感谢。我明白了

标签： javascript vue.js nuxt.js

【解决方案1】：

除了告诉above 的内容之外，我确实建议我的答案here 的第二部分具有完全灵活的样式（How I do personally handle this kind of flow 部分）

<button
  class="flex items-center w-auto p-4 text-center ..."
  :class="[
    callToAction.types[color][variant],
    { 'opacity-50 cursor-not-allowed shadow-none': disabled },
  ]"
>
  Nice flexible button
</button>

将整个 CSS 对象映射到接收到的道具。
如果你有一个实用程序优先的 CSS 框架，比如 Tailwind，它会更好地工作。

【讨论】：