9. Vue 计算属性

如果有这么一段代码【两个变量输出 但是之间要加一个空格】：

   <div class="app">
        <p>{{title + " " + name}}</p>
    </div>

    <script>
        const app = new Vue({
            el:'.app',
            data:{
                title:"欢迎您：",
                name:"Bi-Hu"
            }
        })
    </script>

那么 如果有很多操作的时候 肯定是是很繁琐 代码健壮性也是不好的，所以我们能想到用方法：

    <div class="app">
        <p>{{join()}}</p>
    </div>

    <script>
        const app = new Vue({
            el:'.app',
            data:{
                title:"欢迎您：",
                name:"Bi-Hu"
            },
            methods:{
                join:function (){
                    return this.title + " " + this.name;
                }
            }
        })
    </script>

 

当然我们知道这样行得通 但是问题来了  每个{{}} 胡须表达式里面都要有一个括号，是不是很烦？ 所以有了 计算属性：

 

computed 指令

它类似于 methods 指令，但是呢 他里面定义的方法不用加括号 ，而且 标识符一般不加上动词（get、set 什么什么的）：

所以：

<div class="app">
    <p>{{join}}</p> <!--这里的join是不用括号的 因为Vue当他是一个变量来解析 这就是computed的强大之处-->
</div>

<script>
    const app = new Vue({
        el: '.app',
        data: {
            title: "欢迎您：",
            name: "Bi-Hu"
        },
        computed: {
            //不要加get set 等 那些动词哦~
            join: function () {
                return this.title + " " + this.name;
            }
        }
    })
</script>

所所以呢 你自己对比上下两个代码的不同即可.

 

案例：

计算属性的案例：【为什么用computed 而不是 methods】

这里有一个数组： 

books: [
                {name:'Java开学到退学',price: 56,count: 50},
                {name:'C语言的攻坚战',price: 88,count: 50},
                {name: 'Vue的认知到认输',price: 99,count: 50}
            ]

 

所以，如果叫你计算这三本书的 单价加起来是多少钱 你会怎么做？ for循环 或者 reduce方法？ 都可以，但是放在那里计算呢？

放methods中？ 我们说过 放methods中的话，胡子表达式里面要加括号 那看起来是一个方法嘛，所以我们用这个 computed ，可以看作他是一个变量 【但这个不是答案 缓存才是，最下面介绍】：

 

<div id="app">
<!--  看看sum 看起来他就是一个变量. 貌似就是一个变量了. -->
        <p> 这三本书 单价 总价格是： {{sum}}</p>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            books: [
                {name:'Java开学到退学',price: 56,count: 50},
                {name:'C语言的攻坚战',price: 88,count: 50},
                {name: 'Vue的认知到认输',price: 99,count: 50}
            ]
        },
        computed:{
            sum:function (){
                let sum = 0;
                for (let item in this.books){
                    sum += this.books[item].price;
                }
                return sum;
            }
        }
    })
</script>

 

所以....没了

 

说说计算属性的缓存吧：

计算属性的缓存

还是那个问题： methods和computed看起来都可以实现我们的功能，那为什么用这个 computed呢：

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

 

代码：

 

<div id="app">
    <p>computed : {{show_c}}</p>
    <p>methods : {{show_m()}}</p>
    <p>computed : {{show_c}}</p>
    <p>methods : {{show_m()}}</p>
    <p>computed : {{show_c}}</p>
    <p>methods : {{show_m()}}</p>
    <p>computed : {{show_c}}</p>
    <p>methods : {{show_m()}}</p>

</div>

<script>
    const app = new Vue({
        el: "#app",
        computed: {
            show_c: function () {
                console.log("我执行了 computed 中的 show_c ")     //执行那么多次 控制台只打印了一次
                return "computed"
            }
        },
        methods:{
            show_m:function (){
                console.log("我执行了 methods 中的 show_m ")  //执行那么多次 控制台就打印了那么多次
                return "methods"
            }
        }
    })
</script>

 

所以 这就是区别。

 

 

其实还可以这样写：

 

 

!!2022年9月20日 15:51:40

 

只要在里面定义的函数，里面的值一旦改变【监听到】，那么整个函数都会都被执行，，，，都还给老师了....