淺談Vue 中的 computed 和 methods 的使用

computed：在computed中的函數，是在dom加載後立刻執行的
methods：在methods中的函數，必需要有必定的觸發條件，纔會執行
Vue.js 將綁定表達式限制爲一個表達式，若是想要實現綁定多於一個表達式的邏輯，應當使用計算屬性

下面表格若要實現根據不一樣的角色，來顯示錶格中是否包含操做一列的效果，使用methods來實現邏輯的話，雖然能達到效果，可是頁面加載時會有閃爍的問題，使用computed來實現邏輯，則不會出現閃爍問題。


Vue 的 computed

<!-- 表格 -->
<template>
      <Table 
        border 
        stripe 
        //在此調用了計算屬性中的方法
        :columns="computeCol"     
        :data="TableData" 
      >
        <template slot-scope="{ row }" slot="action">
          <Button type="error" size="small" @click="tableDelect(row.id)"  icon="md-trash">刪除</Button>
        </template>
      </Table>
</template>

<script>
      computed: {
        computeCol () {
          let columns = this.columnsTable
          if (this.nowUser.code !== 'ROLE_MANAGER') {
            columns = columns.filter(col => col.key !== 'action')
          }
          return this.columnsTable = columns
        }
      }
</script>

在計算屬性中，全部 getter（讀取） 和 setter（設置） 的 this 上下文自動地綁定爲 Vue 實例。計算屬性的結果會被緩存，除非依賴的響應式屬性變化纔會從新計算。注意，若是某個依賴 (好比非響應式屬性) 在該實例範疇以外，則計算屬性是不會被更新的。