vue中计算属性与方法的区别简单实例演示

最新推荐文章于 2025-03-31 22:48:29 发布

原创最新推荐文章于 2025-03-31 22:48:29 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文通过一个示例展示了Vue框架中计算属性(computed)与普通方法(methods)之间的区别。计算属性能够缓存结果并仅在依赖的数据发生变化时重新计算，而方法则会在每次调用时重新执行。

计算属性使用的时候是当作属性来调用的，而方法是需要调用的

计算属性会进行缓存，如果依赖不变，则直接使用缓存，而当发需要不断调用

 <div id="app">
        姓:{{firstName}} 
        <br>
        名:{{lastName}}
        <br>
        计算属性全名：{{fullName}}
        <br>
        计算属性全名：{{fullName}}
        <br>
        计算属性全名：{{fullName}}
        <br>
        方法调用获取的全民：{{getFullName()}}
        <br>
        方法调用获取的全民：{{getFullName()}}
        <br>
        方法调用获取的全民：{{getFullName()}}
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                firstName:'麦',
                lastName:'克'
            },
            computed:{
                fullName(){
                    console.log('计算属性fullName')
                    return this.firstName + this.lastName
                }
            },
            methods:{
                getFullName(){
                    console.log('方法调用fullName')
                    return this.firstName + this.lastName
                }
            }
        })
    </script>