浅谈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 实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。