溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹VUE中狀態控制與延時加載刷新的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在實際項目中，我們經常會遇到這種狀況，某些數據我們希望等到需要的時候再去獲取，或者某些數據我們需要刷新，但是不必立刻刷新，而是延時到展示的時候再去刷新。
在DOM操作的年代，想要實現這樣的功能可能會稍微麻煩一些，然而當我們使用數據驅動的mv*框架的時候，這個想要實現這個需求就容易了許多。
當我們理解數據驅動時，我們很容易想到將需要刷新的狀態也設置成為某個數據，在需要刷新的地方watch這個數據，當刷新狀態發生變動的時候，watch生效并執行刷新的方法，這就實現了延時刷新。而且我們不再需要關注延時的過程，只需要更改刷新狀態就可以了。
現在我們用Vue來實現一個狀態驅動的延時刷新。
首先我們利用vue的混合來實現一個統一的刷新接口，你可以把混合理解成一種特殊的繼承來使用。
//刷新mixin
var 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" > <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>
以上是“VUE中狀態控制與延時加載刷新的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
