computed和methods的最大区别

Posted 2021-01-12 anduyinglufei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了computed和methods的最大区别相关的知识，希望对你有一定的参考价值。

好记性不如烂笔头遇上问题还是记下来比较好除非你是天才看东西过目不忘。。。。

先来段methods

<div id="app">
    <input type="text" name="" v-model="t1">+
    <input type="text" name="" v-model="t2">=
    <input type="text" name="" v-model="t3()">
    <p>{{t4()}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            t1:0,
            t2:0
        },
        methods:{
            t3:function(){
                console.log("t3")
                return this.t1 + this.t2
            },
            t4:function(){
                console.log("t4")
                return 333
            }
        }
    })
</script>

methods特性：每当v-model发生数据变化时候 methods里的2个函数都会重新调用一次。

再来一段 computed

<div id="app">
    <input type="text" name="" v-model="t1">+
    <input type="text" name="" v-model="t2">=
    <input type="text" name="" v-model="t3">
    <p>{{t4}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            t1:0,
            t2:0
        },
        computed:{
            t3:function(){
                console.log("t3")
                return this.t1 + this.t2
            },
            t4:function(){
                console.log("t4")
                return 333
            }
        }
    })
</script>