Vue的状况掌握与延时革新

2024年5月27日 138次阅读 来源: 大麦大

在现实项目中，我们经常会碰到这类状况，某些数据我们愿望比及须要的时刻再去猎取，或许某些数据我们须要革新，然则没必要马上革新，而是延时到展现的时刻再去革新。
在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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞