vue计算属性和方法的区别

计算属性是 模版中使用表达式 的一个补充。

我们知道模版中可以写很多js中的方法等，如果逻辑较为复杂，在模版中使用表达式就会让模版显得太复杂，不便于阅读。

比如我们之前的代码：

<p>{{ message.split('').reverse().join('') }}</p>

计算属性写法

计算属性和data、methods、watch是一个级别的，所以它的位置也和它们一样：

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {};
    },
    computed:{}
};
</script>

下面我们将文章开头的代码使用计算属性修改一下：

<p>原字符串：{{ message }}</p>
<p>反转后的字符串：{{ reverseMessage }}<p>

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            message:"猥琐发育--别浪~~"
        };
    },
    computed:{
        reverseMessage(){
            return this.message.split('').reverse().join('')
        }
    }
};
</script>

计算属性和方法的区别

其实methods也可以实现这样的效果，只要我们将reverseMessage移动到methods中即可。

但是为什么不这么做呢？

是因为计算属性是基于它们的响应式依赖进行计算的

• 当message发生改变，访问reverseMessage计算属性会重新计算，然后返回计算结果；
• message不发生改变，reverseMessage计算属性会返回之前的计算结果，而不会重新计算。

而方法在每次访问的时候，都会去执行方法体里的逻辑，然后返回结果。

什么时候要用计算属性呢？

比如说要通过A来得到B，需要做大量计算，那么就需要通过计算属性来获得B。