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>

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