Vue中的computed属性

Computed属性

Vue—Computed属性(计算属性)，弄懂计算属性的使用，需先知道：
一、它的 依赖数据。
二、什么时候会使用计算属性缓存下来的结果；什么时候不使用缓存的结果。

---

用法:

computed:{
	fn1(){
		//函数体
	},
	fn2(){
		//函数体
	}
}

computed属性与methods属性的语法一样，但它们之间的区别就是缓存

直接上Demo:

<template>
  <div>
    <h1>{{set}}</h1><!--set是computed属性的-->
    <h1>{{set}}</h1>
    <h1>{{set}}</h1>
    <h1>{{set}}</h1>
    <h1>{{meth()}}</h1><!--meth是methods属性的-->
    <h1>{{meth()}}</h1>
    <h1>{{meth()}}</h1>
    <h1>{{meth()}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:0,
    }
  },
  methods: {
    meth(){
      console.log("执行meth");
      return this.num+Math.random()*10;
    }
  },
  computed:{
   set(){
     console.log("执行set");
     return this.num+Math.random()*10;
   }
  }
}
</script>

我们可以发现：set执行的都是一样的，而meth执行的结果都不统一，这就是因为缓存，computed使用了缓存，而methods没有缓存。

---

什么时候使用缓存就是我们需要明白的关键：

//根据上面的代码
//在控制台，看见set只执行了一次函数体(因为只打印了一次console.log())
computed:{
   set(){
     console.log("执行set");
     return this.num+Math.random()*10;
   }
}

在代码中，依赖数据是 this.num ，因为this.num并没有改变，使用computed运行一次后，会将结果缓存下来，当set函数重新执行时，会判断this.num这个依赖数据有没有发生改变，没有改变就使用缓存的结果，如果有改变就会重新执行函数体。

---

Demo:

<template>
  <div>
      <h1>{{text}}</h1>
      <input type="button" value="点击" @click="setText">
      <input type="button" value="set" @click="sett">
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:0,
      text:"",
    }
  },
  methods: {
    setText(){
      this.text=this.com;
    },
    sett(){
      this.num=1;
    }
  },
  computed:{
    com(){
      console.log("执行计算属性");
      return this.num+="HELLO"
    }
  }
}
</script>

<style lang="less" scoped>

</style>

效果图:

Tips:
Computed属性中的函数，在methods属性中的使用时，不需要()