Vue.js框架：計算屬性computed的用法（二）

一、computed用法

　　1、js代碼：

var vm = new Vue({
  el: '#test',
  data: {
    message: '計算屬性測試computed'
  },
  computed: {
    message2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

　　2、頁面代碼：

<div id="test">
  <p>原始字符串: {{ message }}</p>
  <p>反轉字符串: {{ message2 }}</p>
</div>

　　3、結果截圖：

　　

二、使用methods完成類似效果

　　1、js代碼：

var vm = new Vue({
  el: '#test',
  data: {
    message: '計算屬性測試methods'
  },
  methods: {
    message2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

　　2、頁面代碼：

<div id="test">
  <p>原始字符串: {{ message }}</p>
  <p>返回字符串: {{ message2() }}</p>
</div>

　　3、結果截圖：

　　

　　注：以上兩種計算方式，computed和methods在js代碼中寫法基本一致，但是在頁面代碼中，methods后面要加()

三、使用computed和methods進行計算的區別

　　1、區別

　　computed基於依賴緩存。

　　（1）多次調用computed中的計算方法時，當第一次計算出結果后，這個結果會緩存下來。只要computed屬性所屬的定義的實例不發生變化，則第二次則不再進行計算而是直接調用第一次的計算結果進行頁面渲染。

　　（2）methods多次調用時，每次的結果都是重新調用methods中的計算方法進行計算的。

　　2、實例

　　(1)當多次執行computed中的計算方法：

　　js代碼：

var x=0;
var vm = new Vue({
  el: '#test',
  data: {
    message: 'computed'
  },
  computed: {
    message2: function () {
      x++;
      return this.message+"    "+x;
    }
  }
})

　　頁面代碼：

<div id="test">
  <p>原始字符串: {{ message }}</p>
  <p>第一次計算: {{ message2 }}</p>
  <p>第二次計算: {{ message2 }}</p>
</div>

　　結果截圖：

　　

 

 　　（2）當多次執行methods中的計算方法：

　　js代碼：

var x=0;
var vm = new Vue({
  el: '#test',
  data: {
    message: 'methods'
  },
  methods: {
    message2: function () {
      x++;
      return this.message+"    "+x;
    }
  }
})

　　頁面代碼：

<div id="test">
  <p>原始字符串: {{ message }}</p>
  <p>第一次計算: {{ message2() }}</p>
  <p>第二次計算: {{ message2() }}</p>
</div>

　　結果截圖：

　　

 

　　前言：Vue.js框架：v-前綴特殊屬性的基本用法（一）