Vue.js中watch、computed、和methods三者区别~ – 记忆角落

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

/ 0评 / 0

最近再次复习了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 不错的总结吧~

发表评论

您的电子邮箱地址不会被公开。