Vue 3 Composition API 组件不起作用重新激活类

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 函数并且它转到函数更改变量的值，但是类不适用。是 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)
         }