Vue的状态控制与延时刷新

DevTTL 发布于2019-08-20 10:21 / 2210人阅读

摘要：当我们理解数据驱动时，我们很容易想到将需要刷新的状态也设置成为某个数据，在需要刷新的地方这个数据，当刷新状态发生变动的时候，生效并执行刷新的方法，这就实现了延时刷新。现在我们用来实现一个状态驱动的延时刷新。

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80103.html

vue.js起步式（二）

摘要：当需要和第三方的动画库，比如配合时会非常有用显式声明过渡类型新增需要给过渡元素添加事件侦听器来侦听过渡何时结束。在下例中我们使用注册一个自定义的过渡元素已被插入在动画结束后调用与相同然后用特性中渐近过渡与一起用时可以创建渐近过渡。 8.方法与事件处理器方法处理器可以用 v-on 指令监听 DOM 事件： Greet 我们绑定了一个单击事件处理器到一个方法 greet。下面在...

BearyChat 2019-08-20 10:29 评论0 收藏0
Vue中对iframe实现keep alive（无刷新）

摘要：前言最近一个需求，需要在项目中加入含有的页面，同时在路由切换的过程中，要求的内容不会被刷新。的原理要实现对保持页的状态。实现的思路既然保持页里的状态很难实现，在这个时候我想到了一个别的方法。前言最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了...

heartFollower 2019-08-02 15:38 评论0 收藏0
Vue中对iframe实现keep alive（无刷新）

摘要：前言最近一个需求，需要在项目中加入含有的页面，同时在路由切换的过程中，要求的内容不会被刷新。的原理要实现对保持页的状态。实现的思路既然保持页里的状态很难实现，在这个时候我想到了一个别的方法。前言最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了...

k00baa 2019-08-26 10:21 评论0 收藏0