Vue3组件计算属性的缓存

【例3.7】  方法调用方式（源代码\ch03\3.7.html）。

<div id="app">
    <button v-on:click="a++">a+1</button>
    <button v-on:click="b++">b+1</button>
    <p>number+a={{add1()}}</p>
    <p>number+b={{add2()}}</p>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             a:0,
             b:0,
             number:30
           }
        },
        methods: {
            add1:function(){
                console.log("add1");
                return this.a+this.number
            },
            add2:function(){
                console.log("add2")
                return this.b+this.number
            }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
 </script>

在Chrome浏览器中运行程序，打开控制台，单击a+1按钮，可以发现控制台调用了add1()和add2()方法，如图3-9所示。

使用计算属性则不同，计算属性相当于优化了的方法，使用时只会使用对应的计算属性。例如修改上面的示例，把methods换成computed，并把HTML中调用add1和add2方法的括号   去掉。

【例3.8】  计算属性的调用方式（源代码\ch03\3.8.html）。

<div id="app">
    <button v-on:click="a++">a+1</button>
    <button v-on:click="b++">b+1</button>
    <p>number+a={{add1}}</p>
    <p>number+b={{add2}}</p>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             a:0,
             b:0,
             number:30
           }
        },
        computed: {
            add1:function(){
                console.log("number+a");
                return this.a+this.number
            },
            add2:function(){
                console.log("number+b")
                return this.b+this.number
            }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
 </script>

在Chrome浏览器中运行程序，打开控制台，在页面中单击a+1按钮，可以发现控制台只打印了number+a，如图3-10所示。

计算属性相较于方法更加优化，但并不是什么情况下都可以使用计算属性，在触发事件时还是使用对应的方法。计算属性一般在数据量比较大、比较耗时的情况下使用（例如搜索），只有虚拟DOM与真实DOM不同的情况下才会执行computed。如果你的业务实现不需要有缓存，计算属性可以使用方法来代替。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。