这节课我们主要来学习computed计算属性。

计算属性的特性是：当计算属性依赖的内容发生变更时，才会重新执行计算。

计算属性设计的初衷是为了减少模板内复杂的逻辑表达式。比如下方例子：

<script>
  const app = Vue.createApp({
    data() {
      return {
        time:"1645200289854"
      }
    },
    template: `<div>{{new Date(Number(time)).toLocaleString()}}</div>`
  })
  const vm = app.mount("#app")
</script>

后端给到我们一个数据是个时间戳，但是我们需要显示给用户的是格式化之后的时间，那么我们就需要再来做一下时间格式化。我们直接把转换逻辑写到模版里面，这样看起来明显不够优雅，而且我们可能还会遇到更复杂的逻辑。遇到这种问题，我们可能会联想到创建一个methods来专门做时间格式化转换。这种方式是可以的，我们来试一下。

声明methods 专门格式化时间

我们来声明一个timeToFormat方法来专门转换时间，这可以达到我们预期效果。

<script>
  const app = Vue.createApp({
    data() {
      return {
        time:"1645200289854"
      }
    },
    methods: {
      timeToFormat(time){
        return new Date(Number(time)).toLocaleString()
      }
    },
    template: `<div>{{timeToFormat(time)}}</div>`
  })
  const vm = app.mount("#app")
</script>

那么居然有computed 的存在，就说明这种方法也是有一定缺陷。缺陷：模版只要触发重新渲染，就会调用我们这个方法。比如看下方例子：

<script>
  const app = Vue.createApp({
    data() {
      return {
        time:"1645200289854",
        message:"hello world!"
      }
    },
    methods: {
      timeToFormat(time){
        console.log(time)
        return new Date(Number(time)).toLocaleString()
      }
    },
    template: `
      <div>{{timeToFormat(time)}}</div>
      <div>{{message}}</div>
    `
  })
  const vm = app.mount("#app")
</script>

我们新添加了一个message 在template中另起了一行来显示message，然后我们在timeToFormat中打印一下时间戳，来判断一下它是否被调用。在浏览器中，我打开控制台直接通过vm来修改message为 “hello vue”。这时我们就会发现时间戳被打印说明timeToFormat还是被调用。做了些无意义的逻辑处理，我们只希望time被修改时才做格式转换。所以这时候就得上我们的computed计算属性了

computed计算属性登场

计算属性以对象形式来声明，在关键词 computed，然后在里面来编写计算方法。我们来声明一个newTime() 同样我们在这个方法里面返回已经格式化好的时间。在template中我们就可以直接使用newTime。

<script>
  const app = Vue.createApp({
    data() {
      return {
        time:"1645200289854",
        message:"hello world!"
      }
    },
    computed:{
      newTime(){
        console.log(this.time)
        return new Date(Number(this.time)).toLocaleString()
      }
    },
    template: `
      <div>{{newTime}}</div>
      <div>{{message}}</div>
    `
  })
  const vm = app.mount("#app")
</script>

浏览器看效果，然后我再打开控制台来修改 message 这是我们看到就不回再来触发newTime了。然后我们再修改一下time，也能实时转换，就很符合我们的需求。

总结：

【重点】计算属性和普通methods方法的区别： 很多面试都会问的

computed计算属性：当计算属性依赖的内容发生变更时，才会重新执行计算。

methods方法：模版只要触发重新渲染，就会触发重新执行计算。