computed和methods的区别

Vue中computed怎么理解？
computed 又称计算属性, 什么情况下会用到计算属性，我们直接上代码理解一下

//我们有个name，经过多次逻辑处理最终显示到页面中
//它不是一个简单的声明式逻辑，我么需要看一段时间才能理解name
<template>
    <div>
        {{name.split('').reverse().join('')}}
        <br>
        {{message}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'hello vue!'
            }
        },
        //所以我们使用computed，处理复杂逻辑，计算属性
        computed: {
            message() {
                return this.name.split('').reverse().join('');
            }
        }
    }
</script>

//使用methods，每次render都会重新计算
<template>
    <div>
        {{getMessage()}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'hello vue!'
            }
        },
        methods: {
            getMessage() {
                return this.message.split('').reverse().join('');
            },
            now() {
                return Date.now()
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

//使用computed是基于它们的依赖进行缓存的，也就是说this.message不改变，每次访问都会立即返回结果
<template>
    <div>
        {{getMessage}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'hello vue!'
            }
        },
        computed: {
            getMessage() {
                return this.message.split('').reverse().join('');
            },
            now() {
                return Date.now()
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

computed 跟data相比更适用于复杂逻辑运算
computed 跟methods相比更适用于需要缓存的计算