Vue中踩坑之路之methods和computed的区别！

在此记录学习Vue的每一步，做到每一步一个手印！

踩坑之一：methods和computed的区别

methods是定义需要执行的函数，computed是计算属性（可以将属性值执行一系列操作之后返回新值）。

那么问题来了。mothods定义函数也可以达到同样的方法，那么为什么需要computed呢?

官方文档给出如下解释

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

 

很抽象，总结出关键部分，计算属性基于响应式依赖，可以进行缓存。我用自己的方式理解了一下响应式依赖。贴上代码如下所示。

computed: {
            message_1:function () {
                return this.message.split('').reverse().join('')
            }
        }

这种反转字符串的computed写法和官方文档methods写法应该可以得到相同的结果。响应式依赖就如官方文档所说，只要message（这里的message即是响应式依赖的值）值不改变，计算属性可以不执行，直接从缓存读取上一次的值。为此我做了一个实验。

这里贴上我的代码

<template>
  <div>
    <div>{{ReverseFunction()}}</div>
    <div>{{message_1}}</div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                message:'javascript'
            }
        },
        methods: {
            ReverseFunction:function(){
                console.log("methods执行了！")
                return this.message.split('').reverse().join('')

            }
        },
        computed: {
            message_1:function () {
                console.log("computed执行了!")
                return this.message.split('').reverse().join('')
            }
        },
        
    }
</script>

代码结构相当之简单，两个div分别对应着methods反转字符串的值和computed的反转字符串的值。

我们来看view视图层的区别，下面是第一次执行的视图。

methods和computed中的函数正常执行，正常打印输出语句。接下来我们在dom结构上做操作，我做的是在div中间插入了一个无意义的空格。重新进入vue项目看控制台输出如下。

我改变了dom结构，virtual dom树重新渲染，数据重新挂载到dom结构中，这时候methods和computed的差别就出现了。由于两者的响应式依赖（这里也就是指的message）没有改变。所以computed不会执行，直接从缓存中拿数据。但是methods就不一样了，它每一次渲染都会老老实实的执行函数并将结果返回。由此可以看出methods方法比较消耗性能。
所以，在实际项目中按照自己的需求将属性值写入methods还是computed。

最后，如果你的需求是监听某个属性的值而改变另外的值，很容易滥用watch，Vue官方推荐的做法是使用computed计算属性来实现。