資訊專欄INFORMATION COLUMN
摘要：當(dāng)我們理解數(shù)據(jù)驅(qū)動(dòng)時(shí)，我們很容易想到將需要刷新的狀態(tài)也設(shè)置成為某個(gè)數(shù)據(jù)，在需要刷新的地方這個(gè)數(shù)據(jù)，當(dāng)刷新狀態(tài)發(fā)生變動(dòng)的時(shí)候，生效并執(zhí)行刷新的方法，這就實(shí)現(xiàn)了延時(shí)刷新?，F(xiàn)在我們用來實(shí)現(xiàn)一個(gè)狀態(tài)驅(qū)動(dòng)的延時(shí)刷新。
在實(shí)際項(xiàng)目中，我們經(jīng)常會(huì)遇到這種狀況，某些數(shù)據(jù)我們希望等到需要的時(shí)候再去獲取，或者某些數(shù)據(jù)我們需要刷新，但是不必立刻刷新，而是延時(shí)到展示的時(shí)候再去刷新。
在DOM操作的年代，想要實(shí)現(xiàn)這樣的功能可能會(huì)稍微麻煩一些，然而當(dāng)我們使用數(shù)據(jù)驅(qū)動(dòng)的mv*框架的時(shí)候，這個(gè)想要實(shí)現(xiàn)這個(gè)需求就容易了許多。
當(dāng)我們理解數(shù)據(jù)驅(qū)動(dòng)時(shí)，我們很容易想到將需要刷新的狀態(tài)也設(shè)置成為某個(gè)數(shù)據(jù)，在需要刷新的地方watch這個(gè)數(shù)據(jù)，當(dāng)刷新狀態(tài)發(fā)生變動(dòng)的時(shí)候，watch生效并執(zhí)行刷新的方法，這就實(shí)現(xiàn)了延時(shí)刷新。而且我們不再需要關(guān)注延時(shí)的過程，只需要更改刷新狀態(tài)就可以了。
現(xiàn)在我們用Vue來實(shí)現(xiàn)一個(gè)狀態(tài)驅(qū)動(dòng)的延時(shí)刷新。
首先我們利用vue的混合來實(shí)現(xiàn)一個(gè)統(tǒng)一的刷新接口，你可以把混合理解成一種特殊的繼承來使用。
//刷新mixin
var refreshMixin = {
props: ["refresh"],
watch: {
//狀態(tài)監(jiān)視
"refresh": function (val) {
//console.log(val)
//刷新列表
val && this.refreshData()
},
},
created: function () {
this.refresh && this.refreshData()
},
}
在這個(gè)refreshMixin中，當(dāng)組件創(chuàng)建或者refresh狀態(tài)發(fā)生變更時(shí)，判斷狀態(tài)是否是true，如果是true，則調(diào)用組件的refreshData方法。
我們?cè)诮M件當(dāng)中混合這個(gè)refreshMixin，并且實(shí)現(xiàn)refreshData方法，就可以實(shí)現(xiàn)狀態(tài)驅(qū)動(dòng)刷新。
注意，refresh狀態(tài)使用雙向綁定，并且在調(diào)用refreshData方法時(shí)立刻將refresh狀態(tài)置為false，以便下次調(diào)用。
下面給予一個(gè)簡(jiǎn)單的demo
https://jsfiddle.net/damaida/...
在實(shí)際項(xiàng)目中，組件可以被延時(shí)到某個(gè)事件被觸發(fā)時(shí)再實(shí)例化，或者列表詳情數(shù)據(jù)被展示時(shí)被調(diào)用
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80103.html
摘要：當(dāng)需要和第三方的動(dòng)畫庫(kù)，比如配合時(shí)會(huì)非常有用顯式聲明過渡類型新增需要給過渡元素添加事件偵聽器來偵聽過渡何時(shí)結(jié)束。在下例中我們使用注冊(cè)一個(gè)自定義的過渡元素已被插入在動(dòng)畫結(jié)束后調(diào)用與相同然后用特性中漸近過渡與一起用時(shí)可以創(chuàng)建漸近過渡。 8.方法與事件處理器 方法處理器可以用 v-on 指令監(jiān)聽 DOM 事件： Greet 我們綁定了一個(gè)單擊事件處理器到一個(gè)方法 greet。下面在...
摘要：前言最近一個(gè)需求，需要在項(xiàng)目中加入含有的頁(yè)面，同時(shí)在路由切換的過程中，要求的內(nèi)容不會(huì)被刷新。的原理要實(shí)現(xiàn)對(duì)保持頁(yè)的狀態(tài)。實(shí)現(xiàn)的思路既然保持頁(yè)里的狀態(tài)很難實(shí)現(xiàn)，在這個(gè)時(shí)候我想到了一個(gè)別的方法。 前言 最近一個(gè)需求，需要在Vue項(xiàng)目中加入含有iframe的頁(yè)面，同時(shí)在路由切換的過程中，要求iframe的內(nèi)容不會(huì)被刷新。一開始使用了Vue自帶的keep- alive發(fā)現(xiàn)沒有用，于是自己研究了...
摘要：前言最近一個(gè)需求，需要在項(xiàng)目中加入含有的頁(yè)面，同時(shí)在路由切換的過程中，要求的內(nèi)容不會(huì)被刷新。的原理要實(shí)現(xiàn)對(duì)保持頁(yè)的狀態(tài)。實(shí)現(xiàn)的思路既然保持頁(yè)里的狀態(tài)很難實(shí)現(xiàn)，在這個(gè)時(shí)候我想到了一個(gè)別的方法。 前言 最近一個(gè)需求，需要在Vue項(xiàng)目中加入含有iframe的頁(yè)面，同時(shí)在路由切換的過程中，要求iframe的內(nèi)容不會(huì)被刷新。一開始使用了Vue自帶的keep- alive發(fā)現(xiàn)沒有用，于是自己研究了...
閱讀 2114·2021-11-18 10:02
閱讀 2863·2021-09-04 16:41
閱讀 1156·2019-08-30 15:55
閱讀 1420·2019-08-29 17:27
閱讀 1106·2019-08-29 17:12
閱讀 2539·2019-08-29 15:38
閱讀 2864·2019-08-29 13:02
閱讀 2841·2019-08-29 12:29
