Vue中computed与method的区别

最新推荐文章于 2025-08-09 20:51:19 发布

转载最新推荐文章于 2025-08-09 20:51:19 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/drw666/p/10899307.html

文章标签：

#javascript #ViewUI

博客介绍了computed和method都可当作方法使用，同时阐述了二者区别。computed是属性调用，无需括号，有缓存，依赖函数不变时从缓存读数据；methods是函数调用，需加括号，无缓存，每次调用都执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed和method都可以当做方法使用

computed和method的区别

区别一：

computed调用是属性调用，不需要加括号，

methods是函数调用，需要加括号

html代码:

<div id="app">
        <input type="text"v-model.number="a">
        <input type="text"v-model.number="b">
        <p v-cloak>结果：{{handle()}}</p>
        <p v-cloak>结果：{{handleCom}}</p>
</div>

js代码：

<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            sum:"",
        },
        methods:{
            handle(){
                return this.a+this.b;
            }
        },
        computed:{
            handleCom(){
                return this.a+this.b;
            }
        }
    })


</script>

如果handle()不加括号，

<p v-cloak>结果：{{handle()}}</p>

会在浏览器中打印

function () { [native code] }

如果handleCom加括号，则会报错

TypeError: handleCom is not a function"

区别二：

computed是当下次所依赖的函数没有发生改变时，再次调用时，会从缓存中读取数据

methods是没有缓存存数据，每次调用每次执行，无论值有没有改变

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            sum:"",
        },
        methods:{
            handle(){
                console.log("handle()被调用了")
                return this.a+this.b;
            }
        },
        computed:{
            handleCom(){
                console.log("handleCom被调用了")
                return this.a+this.b;
            }
        }
    })


</script>