Vue.js中watch、computed、和methods三者区别~

本文最后更新于 1145 天前，其中的信息可能已经有所发展或是发生改变。

最近再次复习了vue.js，一直混淆watch、computed、和methods三者。就谢谢笔记吧~

computed：

属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用。

例:

computed:{
    test1:function(){
        return 'computed:test1';
    },
    test2(){
        return 'computed:test2'
    }
}
//html引用
{{test1}}
{{test2}}

methods：

是一个方法，表示一个具体的操作，主要书写业务逻辑。

例：

methods:{
    handleSubmit(){
        this.count +=1
        console.log('count:'+this.count)
    },
    logInfo(event){
        console.log(event);
    },
    test(){
        return 'methods:test';
    }
}

<form v-on:submit.prevent="handleSubmit()">
    <p>无pervent</p>
    <input type="submit" value="提交" />
</form>
<input type="text" v-on:keyup.enter="logInfo($event)" />
<input type="text" @click.ctrl="logInfo($event)" />
{{test()}}

数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods

watch(侦听属性)：

是一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看做是computed和methods 的结合体。

例：

let app11 = new Vue({
    el: '#app-11',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: '1'
    },
    watch: {
        firstName: function(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName: function(val) {
            this.fullName = this.firstName + ' ' + val
        },
        firstName: function(newValue,oldValue){
            console.log(newValue+'   '+oldValue)
            //console.log('changed firstName')
        }
    }   
});

<div id="app-11">
    {{ firstName }}
    <input type="text"  v-model="firstName"/>
</div>

–>http://www.imooc.com/article/49239?block_id=tuijian_wz 不错的总结吧~

发送评论编辑评论

computed：

methods：

watch(侦听属性)：

发送评论 编辑评论

发送评论编辑评论