Vue计算属性及缓存

计算属性,针对复杂运算多次引用

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage的值始终取决于vm.message的值.

你可以像绑定普通属性一样在模板中绑定计算属性.Vue知道vm.reversedMessage依赖于vm.message,因此当vm.message发生改变时,所有依赖vm.reversedMessage的绑定也会更新.

这也意味

computed: { now: function () { return Date.now() } }

此中的计算属性不会更新,因为Date.now()不是响应式依赖.

相比之下,每当触发重新渲染时,调用方法将总会再次执行函数.

notice:

在默认情况下,cache为true

如果计算属性中未绑定data中的属性,只会执行一次,data改变触发渲染的时候,会从缓存中取数据.

如果计算属性中有绑定data中的属性,则绑定属性改变触发渲染的时候,会再次执行.

手动控制cache

设cache为false,则每次都会执行

<template>
<div id="computedCache">
 <p>{{dm}}</p>
 <p>Reversed message: "{{ mess }}"</p>
 <el-button type="primary" @click="reversedMessage">主要按钮</el-button>
</div>
</template>
<script>
export default {
  name: 'computedCache',
  data () {
    return {
      mess:"qwe"
    }
  },
   computed:{
     dm:{
       cache:true,
       get:function(){
       return Date.now()+" "+this.mess
       }
     }
   },
   methods:{
     reversedMessage: function () {
       this.mess  = this.mess+'1'
     }
   }
}
</script>