在實際項目中，我們經常會遇到這種狀況，某些數據我們希望等到需要的時候再去獲取，或者某些數據我們需要刷新，但是不必立刻刷新，而是延時到展示的時候再去刷新。
在DOM操作的年代，想要實現這樣的功能可能會稍微麻煩一些，然而當我們使用數據驅動的mv*框架的時候，這個想要實現這個需求就容易了許多。
當我們理解數據驅動時，我們很容易想到將需要刷新的狀態也設置成為某個數據，在需要刷新的地方watch這個數據，當刷新狀態發生變動的時候，watch生效并執行刷新的方法，這就實現了延時刷新。而且我們不再需要關注延時的過程，只需要更改刷新狀態就可以了。
現在我們用Vue來實現一個狀態驅動的延時刷新。
首先我們利用vue的混合來實現一個統一的刷新接口，你可以把混合理解成一種特殊的繼承來使用。
//刷新mixinvar refreshMixin = { props: ['refresh'], watch: { //狀態監視 'refresh': function (val) { //console.log(val) //刷新列表 val && this.refreshData() }, }, created: function () { this.refresh && this.refreshData() },}在這個refreshMixin中，當組建創建或者refresh狀態發生變更時，判斷狀態是否是true，如果是true，則調用組建的refreshData方法。
我們在組建當中混合這個refreshMixin，并且實現refreshData方法，就可以實現狀態驅動刷新。
注意，refresh狀態使用雙向綁定，并且在調用refreshData方法時立刻將refresh狀態置為false，以便下次調用。
下面給予一個完整的demo
<html><head> <meta charset="utf-8" /> <title></title> <script src="http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script></head><body> <div id="root" style="padding-left:10%;padding-top:5%;"> <delay-test v-bind:refresh.sync="testRefresh" v-bind:num.sync="num"></delay-test> <button type="button" v-on:click="refreshTest">刷新組件數據</button> </div> <template id="delayTempl"> <div> 延時加載數據： {{num}} </div> </template> <script type="text/javascript"> //刷新mixin var refreshMixin = { props: ['refresh'], watch: { //狀態監視 'refresh': function (val) { //console.log(val) //刷新列表 val && this.refreshData() }, }, created: function () { this.refresh && this.refreshData() }, } //延時加載數據組件 var delayComp = Vue.extend({ template: '#delayTempl', mixins: [refreshMixin], props: ['num'], methods: { refreshData: function () { var self = this //注意，refresh狀態使用雙向綁定，并且在調用refreshData方法時立刻將refresh狀態置為false，以便下次調用 self.refresh = false setTimeout(function () { self.num++ }, 5000) }, }, }) //根實例 var vm = new Vue({ el: '#root', data: { testRefresh: false, num: 0, }, methods: { refreshTest: function () { this.testRefresh = true } }, components: { delayTest: delayComp, } }) </script></body></html>
新聞熱點
疑難解答
圖片精選
