Vue中的计算属性是什么？怎么使用？

Computed properties are special reactiveproperties that are derived from other reactive properties. Computed propertiesare added to the computed property’s objects as functions. They always returnsomething that is derived from other reactive properties. Therefore, they must besynchronous functions.

计算属性是从其他反应属性派生出来的特殊反应属性。计算属性作为函数添加到计算属性的对象中。它们总是返回从其他反应属性派生出来的东西。因此，它们必须是同步函数。

To create a computed property, we can writethe following code:

要创建计算属性，我们可以编写以下代码：

演示计算属性 {{message}} {{reversedMessage}} // 创建应用 const App = { data() { return { message: "hello world" } }, // 计算属性 computed: { // 计算属性本质上是一个方法 reversedMessage() { return this.message.split("").reverse().join("") } } } // 挂载 Vue.createApp(App).mount("#app");

Here, we created the reversedMessagecomputed property, which is the reverse of the message reactive property. Wereturn the message with the order of the characters reversed. Whenever themessage reactive property is updated, the reversedMessage() method will be runagain and return the newest value. Therefore, we can see both “hello world” and“dlrow olleh” in the same template. The return values of these computedproperties must have other reactive properties in them so that they will beupdated when other reactive properties update.

在这里，我们创建了 reversedMessage 计算属性，它是消息反应属性的反向。我们将返回字符顺序颠倒的消息。每当消息被动属性更新时，reversedMessage() 方法就会再次运行，并返回最新的值。因此，我们可以在同一个模板中同时看到 "hello world "和 "dlrowolleh"。这些计算属性的返回值中必须包含其他反应属性，这样当其他反应属性更新时，它们也会随之更新。