计算属性computed

计算属性与方法method要分开

• 平时用的方法method比较多，计算属性computed用的比较少；

模板内的表达式{{message}}

• 这个模板内的表达式非常便利，但是设计他们的初衷是用于简单运算的，在模板中放入太多的逻辑会让模板过重，难以维护；
• 例如：

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

• 上面的模板已经不是初衷上的简单的模板，而是一长串的逻辑，你需要花费一些时间，才能意识到这句话的意思是显示变量message的翻转字符串。
• 当你想要在模板中的多处包含呲翻转字符串时，就会更加难以处理；
• 所以对于任何复杂逻辑，你都应当使用计算属性。

基础例子

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
------------------------
var vm = new Vue({
  el:'#example',
  data: {
  message:'Hello'
  },
  computed:{
  //计算属性的getter
  reverseMessage: function (){
  // `this`指向vm实例
  return this.message.split('').reverse().join('')
  }  
  }
})

split()方法的使用

• 将字符串变成数组；
• split()方法使用指定的分隔符字符串将一个string对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
• 总之，无论怎么分割，得到的结果的类型是一个数组；

join()方法的使用

• 将数组中所有元素转换为一个字符串：
• 元素是通过指定分隔符分割的；
• 案例

var fruits = ["Banana", "Orange", "Apple", "Mango"];\
var energy = fruits.join();

• 输出的结果

Banana,Orange,Apple,Mango

语法

array.join(separator)

• separator是参数，指定要使用的分隔符，如果省略，不代表没有，默认使用逗号作为分隔符；

更多案例

• 使用不同分隔符

var fruits = ["Banana", "Orange", "Apple", "Mango"];\
var energy = fruits.join(" and ");

• 输出的结果

Banana and Orange and Apple and Mango

计算属性vs侦听属性watch

• Vue提供了一种更通用的方式来观察和响应Vue实例上数据的变动：侦听属性；当有一些数据需要随着其他数据变动而变动时，