Vue 3 Composition API 组件无法重新激活 class

Question

我有一个按钮，我只想让它在点击时显示动画 - 按下时制作。如果我制作如下可选组件，它会起作用：

<template>
          <button class="button" :class="{'shadow__click': classButton}" @click="buttonClass">
            Tell me already!
          </button>
</template>
    
<script>

export default {
  data(){
    return {
     classButton : false
    }
  },
  methods: {
    buttonClass(){
      this.classButton = true;
      setTimeout(() => {
        this.classButton = false
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.button{
    cursor: pointer;
    padding: 12px 24px;
    position: relative;
    border-radius: 5px;
    background-color: #38b2ac;
    border: none;
    color: #fff8e1;
}

.shadow__click{
  animation: click 1s
    }

@keyframes click {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 5px;
    left: 1px;
  }
  50% {
    top: 10px;
    left: 3px;
  }
  75% {
    top: 5px;
    left: 1px;
  }
  100% {
    top: 0;
    left: 0;
  }
}
</style>

但是当我使用组合方式时它不想工作而且我没有看到问题但它根本不起作用（（我 console.loged 函数并且它去函数改变值一个变量，但 class 不适用。这是 Vue 3 错误吗？

<script>
 import { ref } from "vue"

       setup(){
      
         let classButton = ref(false);
         function buttonClass(){
           classButton = true;
           setTimeout(() => {
             classButton = false
           }, 1000)
         }
      
         return { classButton, buttonClass}
           }
    </script>

Answer 1

您应该使用 value 字段改变 ref :

    let classButton = ref(false);
         function buttonClass(){
           classButton.value = true;
           setTimeout(() => {
             classButton.value  = false
           }, 1000)
         }

Vue 3 Composition API 组件无法重新激活 class

Vue 3 Composition API component doesn't work reactivate class

vue.js

vuejs3