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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。