vue计算属性介绍

Vue对象中, 一个重要的属性是computed, 常用于计算属性

看下面的例子, 是把 hello 单词反转

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>计算属性的例子</h2>
<div id="example">
  <p>原始的字符串: "{{ message }}"</p>
  <p>计算属性后反转的字符串: "{{ reversedMessage }}"</p>
</div>
<script>
		var vm = new Vue({
		  el: '#example',
		  data: {
			message: 'Hello'
		  },
		  computed: {
			// 计算属性的 getter
			reversedMessage: function () {
			  // `this` 指向 vm 实例
			  return this.message.split('').reverse().join('')
			}
		  }
		});
</script>

它能够把属性 hello 进行一些 js 代码处理, 并返回, 也就是对它进行了计算

看起来它和方法是差不多的, 但它和方法是有区别的, 后面我们将讲到

值得一提的是, 如果你直接使用 {{}} 中实现反转的功能也是可以的,

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

这样做的坏处就是让模板过于沉重, 要读完代码才知道要显示 message 的反转. 而且在另一个组件上调用此输出又得重新写一遍, 故对任何复杂的逻辑处理, 你应该使用计算属性.

在上面的例子中, reversedMessage可以理解是 vm 的一个变量, 你可以通过 vm.reversedMessage 获取它的值, 这和{{reversedMessage}}是一样的效果

此外, vm.reversedMessage 可以理解为 message 的一个处理后的 getter 方法, 也就是 vm.reversedMessage 实际上是message一个取值兼处理的方法.