Typescript Vue-组件赢得'；使用方法更新数据时不重新渲染

我有一个非常简单的vue组件，如下所示：

<template>
  <div class="incrementor">
    <p v-text="counter"></p>
    <button v-on:click="increment()">Increment</button>
  </div>
</template>

<script lang="ts" src="../scripts/incrementor.ts"></script>
<style lang="scss" src="../styles/incrementor.scss"></style>

<template>
  <div class="incrementor">
    <p v-text="counter"></p>
    <button v-on:click="counter++">Increment</button>
  </div>
</template>

<script lang="ts" src="../scripts/incrementor.ts"></script>
<style lang="scss" src="../styles/incrementor.scss"></style>

我的问题是，当我单击按钮时，我可以看到控制台中的计数器在增加，但组件不会重新渲染，因此浏览器中的“计数器”文本保持在0

我知道我可以这样做：

<template>
  <div class="incrementor">
    <p v-text="counter"></p>
    <button v-on:click="increment()">Increment</button>
  </div>
</template>

<script lang="ts" src="../scripts/incrementor.ts"></script>
<style lang="scss" src="../styles/incrementor.scss"></style>

<template>
  <div class="incrementor">
    <p v-text="counter"></p>
    <button v-on:click="counter++">Increment</button>
  </div>
</template>

<script lang="ts" src="../scripts/incrementor.ts"></script>
<style lang="scss" src="../styles/incrementor.scss"></style>

增量

这是可行的，但我希望能够使用我自己的方法来实现这一点。

这里有几个问题：

我们需要传递函数引用，而不是直接调用函数，如下所示：

<button v-on:click="increment">

执行这些更改后，增量计数器将正常工作

这里有几个问题：

我们需要传递函数引用，而不是直接调用函数，如下所示：

<button v-on:click="increment">

执行这些更改后，增量计数器将正常工作

---

只需从函数调用中删除

（）

，并像这样使用它：

v-on:click=“increment”

仍然是相同的结果请为此使用创建一个显示发生的问题。只需从函数调用中删除

（）

，并像这样使用它：

v-on:click=“increment”

仍然是相同的结果请为此创建一个用于显示发生的问题的视图。它现在可以工作了，我想是箭头函数把它搞砸了。谢谢。它现在可以工作了，我想是箭头功能把它搞砸了。谢谢