vue之计算属性的缓存computed的使用

发布于

计算属性的缓存

我们可能会考虑这样的一个问题：methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。我们来看下面的代码：
在这里插入图片描述
在这里插入图片描述
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--1.直接拼接:语法过于繁琐-->
        <h2>{{firstName}} {{lastName}}</h2>

    &lt;!--2.通过定义methods--&gt;
    &lt;h2&gt;{{getFullName()}}&lt;/h2&gt;
    
    &lt;!--3.通过computed--&gt;
    &lt;h2&gt;{{fullName}}&lt;/h2&gt;
&lt;/div&gt;

&lt;script src=&#34;../js/vue.js&#34;&gt;&lt;/script&gt;
&lt;script&gt;
    const app = new Vue({
    el: &#39;#app&#39;,
    data: {
        firstName: &#39;Kobe&#39;,
        lastName: &#39;Bryant&#39;
        },
        methods: {
            getFullName: function () {
                return this.firstName+&#39; &#39;+this.lastName
            }
        },
        computed: {
            fullName: function () {
                return this.firstName+&#39; &#39;+this.lastName
            }
        }
    })
&lt;/script&gt;



</body>

</html>
在这里插入图片描述
  • 在多次循环使用时，methods时会多次调用，而computed只调用一次

#缓存#methods