计算属性的基本使用

computed 计算属性 的基本使用

computed ： Vue提供的一个配置项

注意: 当data中的数据发生变化,页面中的指令和表达式会重新计算, 有时候不相关数据变化会导致一直重新计算,所以这里引出了计算属性

1. 如何使用？

   computed 和 data同级，计算属性写在computed中；

   写起来像方法；

   用起来像属性。

2. 特点（注意点）：

   1）一定要有返回值。

   2）可以使用data中的已知值。

   3）只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化。

   4）计算属性名不能和data中的数据重名（因为要使用data中的数据）

3. 什么时候使用？

   想要根据data中的已知值，得到一个新值，并且这个新值会随着相关数据的变化而变化

little-demo: 使用计算属性来控制元素的显示与隐藏

<div id="app">
<input type="text" v-model="name" />
<span v-show="isShow">请输入3-6个字符</span>
</div>

<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "zs"
},
computed: {
isShow() {
//当this.name的长度小于3或者大于6时显示提示内容(我根据name的变化而变化)
if (this.name.length >= 3 && this.name.length <= 6) {
return false;
} else {
return true;
}
}
}
});
</script>

演示问题 : 通过改变num的值,来控制span的显示和隐藏

问题:
我们想要的是点击时,num变化了,span才显示.
但是现在,没有点击按钮,num没有发生变化,在文本框中输入文字,isShow函数也调用了,这并不是我们想要的.
这是因为: 一旦data中的数据发生改变,页面中所有的指令和表达式都会重新计算,这样非常影响性能!

<div id="app">
<input type="text" v-model="name" />
<span v-show="isShow">我出现了</span>
<h1>{{ num }}</h1>
<button @click="fn">点击++</button>
</div>

<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "zs",
num: 100
},
methods: {
fn() {
this.num++;
}

//   isShow() {
//     console.log("我变化了");
//     return this.num > 100;
//   }
},
//解决: vue中提供了计算属性
computed: {
isShow() {
console.log("我变化了");
return this.num >= 105;
//计算属性只相关属性有关,相关属性变化,计算属性才会变化.(这是我们想要的结果)
}
}
});
</script>

思考 : 为什么要有计算属性?