Vuejs @input="function" 不起作用，但 @input="() => do some" 正在起作用

Question

我不明白为什么当我将匿名函数传递给我的 html 输入组件的 @input 字段时它起作用，但是当我调用内部具有完全相同代码的真实函数时它不起作用。这是不工作时的代码：

<script setup>
import { ref } from 'vue'

const text = ref('')
const numberChar = ref(0)
const numberWords = ref(0)

function count() {
    numberChar = text.length
    numberWords = text.split(' ').filter((e) => e != '').length
}

</script>

<template>

<div class="box">
<input v-model="text" placeholder="Write here" @input="count"/>
 <p>
     Text : {{text}} <br>
     Characters : {{numberChar}} <br>
     Words : {{numberWords}}
 </p>
</div>

</template>

但是当我简单地说：

<input v-model="text" placeholder="Write here" @input="() => numberChar = text.length"/>

numberChar 值已正确修改并显示。 我正在启动 Vuejs，所以我错过了一些东西，但我已经为此苦苦挣扎了一个小时......

Answer 1

谢谢大家，我已经解决了这个问题。问题是我在函数中写的

numberChar = text.length

而不是

numberChar.value = text.value.length

奇怪的是，在我的匿名函数中，它在没有 .value 的情况下工作，我不知道为什么。在此处的教程中： https://vuejs.org/tutorial/#step-4他们正在以我尝试使用它的方式使用它。他们也在教程中说 .value 不是必需的，因为如果没有指定任何内容，它是隐式的？

对于那些说我问题的标签和标题不正确的人，我下次会尽力做得更好，谢谢。 （这是我在 stackoverflow 上的第一篇文章）

谢谢:)