Vue的状态控制与延时刷新

时间 2019-11-08

标签 vue 状态控制延时刷新繁體版

原文原文链接

在实际项目中，咱们常常会遇到这种情况，某些数据咱们但愿等到须要的时候再去获取，或者某些数据咱们须要刷新，可是没必要马上刷新，而是延时到展现的时候再去刷新。
在DOM操做的年代，想要实现这样的功能可能会稍微麻烦一些，然而当咱们使用数据驱动的mv*框架的时候，这个想要实现这个需求就容易了许多。
当咱们理解数据驱动时，咱们很容易想到将须要刷新的状态也设置成为某个数据，在须要刷新的地方watch这个数据，当刷新状态发生变更的时候，watch生效并执行刷新的方法，这就实现了延时刷新。并且咱们再也不须要关注延时的过程，只须要更改刷新状态就能够了。
如今咱们用Vue来实现一个状态驱动的延时刷新。
首先咱们利用vue的混合来实现一个统一的刷新接口，你能够把混合理解成一种特殊的继承来使用。javascript

//刷新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方法，就能够实现状态驱动刷新。html

注意，refresh状态使用双向绑定，而且在调用refreshData方法时马上将refresh状态置为false，以便下次调用。

下面给予一个简单的demo
https://jsfiddle.net/damaida/...vue

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

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