VUE中状态控制与延时加载刷新的示例分析-创新互联
这篇文章主要介绍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
刷新组件数据
延时加载数据： {{num}}
//刷新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,
}
})
以上是“VUE中状态控制与延时加载刷新的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：VUE中状态控制与延时加载刷新的示例分析-创新互联
本文链接：http://kswjz.com/article/deocgg.html
