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

先来段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>

computed 特性：每当v-model发生数据变化时候 computed里只有t3一个函数都会调用。

总结 computed会缓存数据 按需更新 不会重复渲染DOM 比较节约性能 语法方面 不能写（） 必须return

methods的话 我就不写了 你懂得。。。。

原文地址：https://www.cnblogs.com/anduyinglufei/p/9784986.html