Vue中，计算属性computed和methods的区别

最新推荐文章于 2023-10-11 15:26:26 发布

Kevin11Yao

最新推荐文章于 2023-10-11 15:26:26 发布

阅读量100

点赞数

分类专栏： Vue 文章标签： javascript vue.js html es6

本文链接：https://blog.csdn.net/weixin_45664402/article/details/114462473

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue中，计算属性computed和methods的区别

写在前面：
关键点：

计算属性computed是有缓存的。
计算第一次结果后会存入缓存，第二次调用该计算属性computed的时候，他会先读取需要返回的结果是否发生改变，如果没有就直接返回缓存的结果，如果改变了才会从新计算。

应用场景小demo：
在内容拼接时，直接在html代码中书写mustache语法{{ }}的时候，若内容较多，则会导致篇幅较大。因此可以通过创建methods中的方法或者创建computed中的属性来进行代码可读性优化。

代码如下：

<body>
    <div id="app">
        <!-- 1.直接拼接：语法过于繁琐 -->
        <h2>{{firstName+' ' + lastName}}</h2>
        <!-- 2.通过定义methods -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>          <!-- methods中的方法打印了4次 -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        

        <!-- 3.通过computed属性 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>               <!-- computed打印了1次 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                firstName:'Kobe',
                lastName:'Beyant'
            },
            methods:{
                getFullName: function(){
                    console.log('调用的methods');
                    return this.firstName + ' ' + this.lastName;
                }
            },
            computed:{
                fullName: function(){
                    console.log('调用的computed');
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
        //  计算属性会做一次缓存， 如果内容没有改变，则这个缓存就不会改变，每次访问都是访问这个缓存
        // 因此， 计算属性的性能 要好于 methods属性 
    </script>
</body>