详解VUE的状态控制与延时加载刷新

时间：2021-05-25

在实际项目中，我们经常会遇到这种状况，某些数据我们希望等到需要的时候再去获取，或者某些数据我们需要刷新，但是不必立刻刷新，而是延时到展示的时候再去刷新。

在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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章