vue computed用法

在Vue中，computed属性是一种计算属性，它是一个函数，它可以根据依赖的数据动态计算出一个新的值，并且当依赖的数据发生变化时，它会自动重新计算。

computed属性与methods方法的区别在于，computed属性是基于它的依赖缓存的，只有当依赖发生变化时才会重新计算，而methods方法在每次重新渲染时都会执行一次。

computed属性的使用方式如下：

<template>
  <div>
    <p>原始值：{{ message }}</p>
    <p>计算属性：{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

在上面的代码中，我们定义了一个message数据属性，它的初始值为"Hello, Vue!"，同时定义了一个computed属性reversedMessage，它的值是基于message属性计算出来的，即将message属性的值翻转。

在模板中，我们可以直接使用reversedMessage属性，在页面渲染时，它会根据message属性的值计算出一个新的值并显示出来。

需要注意的是，computed属性只有在其依赖的数据发生变化时才会重新计算，因此，我们应该尽可能地将计算量较大的逻辑放在computed属性中，而不是放在methods方法中，以提高性能。