首页 / VUE / 详解VUE的状态控制与延时加载刷新

详解VUE的状态控制与延时加载刷新

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解VUE的状态控制与延时加载刷新，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2436字，纯文字阅读大概需要4分钟。

内容图文

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

在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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的详解VUE的状态控制与延时加载刷新全部内容，希望文章能够帮你解决详解VUE的状态控制与延时加载刷新所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/344932.html

来源：【匿名】