Vue的状态控制与延时刷新

2024年5月24日 128次阅读 来源: 大麦大

在实际项目中，我们经常会遇到这种状况，某些数据我们希望等到需要的时候再去获取，或者某些数据我们需要刷新，但是不必立刻刷新，而是延时到展示的时候再去刷新。
在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
https://jsfiddle.net/damaida/…

在实际项目中，组件可以被延时到某个事件被触发时再实例化，或者列表详情数据被展示时被调用

<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>
    原文作者：大麦大
    原文地址: https://segmentfault.com/a/1190000006659264
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞