Vue计算属性基础

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

不足之处：

在{{}}模板中放入太多的逻辑会让模板内容过于复杂且难以维护。 比如以下代码，想要看懂这一行代码还是需要一点时间的，这里代码是想要显示变量message反转的字符串。

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

因此，对于任何复杂逻辑，都应当使用计算属性。计算属性要定义在Vue的实例的computed选项中，计算属性本质是一个方法。

computed计算属性关键词，主要引用于处理一些复杂的逻辑。

具体代码:

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

上面的代码都是输出“hello vue”反转后的字符。计算属性虽然叫做属性，但也是用来存储数据的，本质上是方法。上述代码中的将定义计算属性的代码改为像属性一样直接赋值是不行的，必须通过方法返回。

reversedMessage this.message.split('').reverse().join('')

计算属性描述一个属性值依赖于另一个属性值的量叫做计算机属性。如果用表达式{{}}将计算机属性绑定到页面元素上的时候依赖的属性值变化时计算属性会自动更新DOM元素。

在vue.js中，有methods和computed两种方式来动态当作方法来用的。
** 1.首先最明显的不同 就是调用的时候，methods要加上（）
** 2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

computed 和 methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

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