Vue中的computed怎么理解？是如何实现的？

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

// 我们有一个message,经过多次逻辑处理最终显示到页面中
// 它不是一个简单的声明式逻辑，我们需要看一段时间才能理解message意图
<div id="example"> 
  {{ message.split(' ').reverse().join(' ') }}
</div>
// 所以，这时候应该尝试使用computed，也就是说对任何复杂逻辑，你都应该用计算属性
<div>
  {{ message }}
computed:{
  message:function(){
   return  this.name.split(' ').reverse().join(' ')
  }
}
</div>

computed vs methods
计算属性跟方法都能打到同样的方法，那么他们之间有什么不同呢？我们还是看一段代码理解一下

// methods 每次render都会重新计算
<template>
  <p>{{getName()}}</p>
</template>
methods:{
  getName:function(){
    return this.name.split(' ').reverse().join(' ')
  }
}
// 使用computed ,computed是基于他们的依赖进行缓存的，也就是说下面这段代码只要this.name不改变，每次访问都会立即返回结果
<template>
  <p>{{getName}}</p>
</template>
computed:{
  getName:function(){
    return this.name.split(' ').reverse().join(' ')
  },
}

总结：methods是实时的，在重新渲染时，函数总会重新调用执行，不会缓存，（多次输出时间不同）
而computed只有在属性值发生改变时才会触发，因此 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式

methods: {
    now: function () {
      return Date.now()
    }
}

如果用computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now。