前言
本文主要給大家介紹了關(guān)于vue中計(jì)算屬性(computed)、methods和watched之間的區(qū)別,分享出來(lái)供大家參考學(xué)習(xí),下面來(lái)一起看看詳細(xì)的介紹:
計(jì)算屬性
和普通屬性一樣是在模板中綁定計(jì)算屬性的,當(dāng)data中對(duì)應(yīng)數(shù)據(jù)發(fā)生改變時(shí),計(jì)算屬性的值也會(huì)發(fā)生改變。
Methods
methods是方法,只要調(diào)用它,函數(shù)就會(huì)執(zhí)行。
相同:兩者達(dá)到的效果是同樣的。
不同:計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的,只有相關(guān)依賴(lài)會(huì)發(fā)生改變時(shí)才會(huì)重新求職。只要相關(guān)依賴(lài)未改變,只會(huì)返回之前的結(jié)果,不再執(zhí)行函數(shù)。
<p>原始數(shù)據(jù):{{msg}}</p> <p>改變后的數(shù)據(jù):{{changemsg}}</p> var vm=new Vue({ <span style="white-space:pre"> </span>el:"#example", data:{ <span style="white-space:pre"> </span>msg:"hello", <span style="white-space:pre"> </span>}, <span style="white-space:pre"> </span>computed:{ changemsg:function(){ return this.msg.split("").reverse().join(""); }, }
computed屬性 VS watched 屬性
watched屬性:代碼更易于理解,它指定監(jiān)測(cè)的值是誰(shuí),然后相應(yīng)的改變其他的值。
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
computed屬性:代碼更簡(jiǎn)單。
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
總結(jié)
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com