详解VUE的状态控制与延时加载刷新
更新时间：2017年03月27日 09:21:08 作者：SEGMENTFAULT
本篇文章主要介绍了详解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" 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 如何关掉响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家分享一篇基于vue打包后字体和图片资源失效问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家详细介绍了vue实现侧边定位栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue项目打包后部署到服务器,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
Vue3 使用v-md-editor如何动态上传图片的方法实现
本文主要介绍了Vue3 使用v-md-editor如何动态上传图片，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
下面小编就为大家带来一篇Vue渲染函数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了vue-cli webpack 开发环境跨域详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论