中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue的計算屬性

發布時間:2020-08-08 22:07:04 來源:ITPUB博客 閱讀:218 作者:山有木xi 欄目:web開發

通常我們會在模板中綁定表達式,模板是用來描述視圖結構的。如果模板的表達式存在過多的邏輯,就會變得臃腫不堪,可維護和可讀性就會較差,因此,為了簡化邏輯,當某個屬性值依賴于其他屬性的值時,就可以使用計算屬性

來看一個簡單的計算屬性的例子

<div id="example">
<input type="text" v-model="a"/>
<input type="text" v-model="b"/>
<br>
a={{ a }},b={{ b }},c={{ c }}
</div>
var vm=new Vue({
el:"#example",
data:{
a:'a',
b:'b'
},
computed:{
c:{
get:function(){
return this.a+this.b
},
set:function(newVal){
var names=newVal.splite('')
this.a=names[0]
this.b=names[1]
}
}
}
})

在這個例子中,我們在html中只需要插入a,b,c即可,而背后的計算過程交由computed:計算屬性來解決,當a和b的值發生改變時,c的值也會改變,而當我們的c發生改變時,相對于的a和b的值也會發生改變

這樣看來,計算屬性的使用還是很舒服的,但是如果再計算屬性方法中執行大量的耗時操作,就可以會帶來一些性能問題,比如說:在計算屬性getter中循環一個大的數組以執行很多操作,那么當頻繁調用該計算屬性時,就會導致大量不必要的運算

在早期的Vue中,只要讀取相對于的計算屬性,就要執行一遍getter,但是在現在的Vue中,只有計算屬性依賴的屬性值發生改變才會執行新的getter

這就要說到計算屬性和方法的區別:計算屬性的緩存,基于依賴進行的緩存。即,當程序所依賴的觀察數據屬性發生改變之后,才重新執行getter,否則有緩存可以節省性能

只是這樣也有一個問題,只有Vue實例中被觀察的數據屬性發生了改變時才會重新執行getter,但是有時候計算屬性依賴實時的非觀察數據屬性(例如最新的時間),所以Vue提供了緩存開關(關鍵詞:cache),當我們將cache設為false時,每次執行都要重新執行一遍getter

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

游戏| 明光市| 武宁县| 宁都县| 滦南县| 城步| 凯里市| 台东县| 留坝县| 湘潭市| 古交市| 南溪县| 汝州市| 武山县| 万源市| 灵丘县| 长泰县| 永胜县| 琼中| 长海县| 浮山县| 化德县| 五华县| 廉江市| 濮阳市| 云龙县| 凯里市| 东明县| 岳阳县| 洪泽县| 怀宁县| 台北市| 秦安县| 新建县| 浮山县| 邻水| 嘉定区| 湘西| 安庆市| 子长县| 敦化市|