170.[vue]Vue 中的 computed 和 methods 有什么区别

[webVueBlog]

[vue]

[webVueBlog]

Vue 中的 computed 和 methods 有什么区别

先看段代码

<template>
  <div>
    <p>使用computed {{ message }}</p>
    <p>使用methods {{ message() }}</p>
  </div>
</template>

<!-- 简略代码 -->
<script>
  data () {
    return {
      message: '我是message'
    }
  }
  computed: {
    message: function () {
      return this.message
    }
  },

  methods: {
    message() {
      return this.message
    }
  }
</script>

• 首先最明显的不同 就是调用的时候， methods要加上（）

• computed 是基于它的依赖缓存, 只有相关依赖发生改变时才会重新取值

• 使用 methods ，在重新渲染的时候，函数总会重新调用执行,也就是说，methods 是实时的，在重新渲染时，函数总会重新调用执行，不会缓存

• 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。但是在利用实时信息时，比如显示当前进入页面的时间，必须用 methods 方式，如果用 computed 计算属性的话，每次进入页面将一直沿用第一次的信息