vue计算属性-缓存

vue计算属性-缓存

目标: 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

<template>
  <div>
      <h1>求 {{a}} + {{b}} 的和</h1>
      <p>求和的结果为：{{sum}}</p>
      <p>求和的结果为：{{sum}}</p>
      <p>求和的结果为：{{sum}}</p>
      <p>求和的结果为：{{sum}}</p>
      <hr>
      <p>求和的结果为：{{ass()}}</p>
      <p>求和的结果为：{{ass()}}</p>
      <p>求和的结果为：{{ass()}}</p>
      
  </div>
</template>

<script>
export default {
data () {
    return {
        a:1,
        b:2, 
    }
},
// 书写计算机属性的结构
computed: {
    // 在computed 结构中定义的变量名不能与 data中重复
   sum(){
       console.log('调用计算机属性，得到的sum结果1')
       return this.a+this.b
   }
},
// 书写函数的结构
methods: {
    ass(){
console.log('调用函数，得到的求和结果2')
return this.a + this.b
    }
}
}
</script>

<style>

</style>