vue：计算属性、方法和侦听器对比-优快云博客

1、模板内的表达式非常便利，用于简单的运算，但是，放入过多的逻辑运算就显的笨重，难以维护。

解决：

1.1模板中使用计算属性。

<template>
    <p>{{ reversedMessage }}</p>
</template>

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

1.2模板中使用方法

<template>
    <p>{{ reversedMessage () }}</p>
</template>

<script>
    export default {
        data: {
            message: 'Hello'
        },
        methods: {
            reversedMessage (){
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>

计算属性VS方法：

计算属性是基于它们的依赖进行缓存的，只有相关依赖发生改变时它们才会重新求值。相比之下，每次触发渲染时，总会调用方法再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

2、侦听属性：更通用的方式观察、响应vue实例上的数据变动。watch侦听回调。

计算属性VS侦听属性：

如果是命令式的、重复的，用计算属性会更好。

如果数据变化时需要执行异步（例如请求）或者开销较大的操作时，用侦听属性最有用的。