复习Vue：用简单的例子认识计算属性-computed与方法-method就可以做出想要的效果。但是如果我需要加入更多

使用场景

我们假设一个组件中的一个文本，内容为 123,456,789

<template>
    <div class="demo">
        {{text}}
    </div>
</template>

<script>
    export default {
      data(){
        return{
          text:"123,456,789",
        }
      },
    }
</script>

现在我想将页面显示的内容变成 789,456,123该如何操作？整个简单粗暴的，直接在 {{}} 中对数据进行操作，举个栗子：

//将字符串转换为一个数组，将其顺序颠倒后再变为字符串即可
 {{text.split(",").reverse(),join(",")}}

就可以做出想要的效果。

但是如果我需要加入更多的操作，可能会导致表达式变得很长，不美观且有碍于阅读。

为了解决这个问题，可以考虑使用：

使用computed-计算属性。

<template>
    <div class="demo">
        {{reverseText}}
    </div>
</template>

<script lang='js'>
    export default {
      data(){
        return{
          text:"123,456,789",
        }
      },
      computed: {
        reverseText: function(){
          return this.text.split(',').reverse().join(',')
        }
      }

    }

将计算的步骤整个抽出，放在与data同级的computed属性内，这样页面输出的结果就是 789,456,123 了。

使用method-方法

<template>
    <div class="demo">
        {{reverse()}}
    </div>
</template>

<script lang='js'>
  export default {
    data() {
      return {
        text: "123,456,789",
      }
    },
    methods: {
      reverse() {
        return this.text.split(',').reverse().join(',')
      }
    }

  }
</script>

定义一个方法reverse，将计算步骤写入方法中，只需要在{{}}中调用reverse方法，同样能够得到 789,456,123 。

计算属性与方法的主要区别

计算属性所得到的是一个属性，可以直接写在{{}}中，而方法是函数，需要加()才可以调用。
计算属性computed是基于它的依赖缓存的，拿上面的那个例子来说，只有在计算属性所依赖的数据text发生变化时，这个计算属性才会更新，用户多次访问reverseText时，它会立刻返回之前的计算结果，不需要再次执行。而方法method在每一次页面触发重新渲染时都会再次执行函数，相比之下，计算属性computed更加节省性能，所以，数据所需要进行的运算越长越复杂，就越应该坚持使用computed计算属性。