Vue对类的React

rjee0c15 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(82)

我想在reactive中 Package 一个类对象，这样我就可以触发我的方法，这些方法作用于属性，并显示属性的最新值。
例如，在此示例代码中：

<script setup lang="ts">
import { reactive, nextTick } from 'vue'

class Test {
  public num: number;

  public constructor() {
    this.num = 3;
  }

  public increment = () => {
    this.num++;
  }
}

const test = reactive(new Test());
</script>

<template>
  <h1>{{ test.num }}</h1>
  <button @click="test.increment">Add 1</button>
</template>

字符串
一旦按下按钮，标题的值应显示值4。但是当按下按钮时，值不会改变？
有没有更干净的解决方案来代替将所有类属性标记为ref？我希望我能用React来完成这项工作。一个代码示例位于vue playground
谢谢你的帮忙。

vue.js

来源：https://stackoverflow.com/questions/76699032/vues-reactiv-with-classes

1条答案

按热度按时间

m0rkklqb1#

Vue的React性系统最适合普通的JavaScript对象，而不是类示例（正如Estus Flask在评论中正确提到的那样）。但是如果你将每个示例变量 Package 在一个ref中，你仍然可以使用类：

import { ref } from 'vue'

class Test {
  public num = ref(3);
  public increment = () => this.num.value++;
}

const test = new Test();

字符串
在您的模板中：

<template>
  <h1>{{ test.num.value }}</h1>
  <button @click="test.increment">Add 1</button>
</template>

型
或者，你可以使用reactive和一个普通的JavaScript对象：

import { reactive } from 'vue'

const test = reactive({
  num: 3,
  increment() { this.num++; },
});

型
你的模板应该是：

<template>
  <h1>{{ test.num }}</h1>
  <button @click="test.increment">Add 1</button>
</template>

型
不要使用类。相反，这种方法在Vue中更典型，并且更容易理解和维护。
希望这对你有帮助！🌷

赞(0）回复(0）举报 2023-08-07

我来回答

Vue对类的React

1条答案

相关问题

热门标签

最新问答