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


Posted in Javascript onMarch 27, 2017

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 #Javascript
js实现三级联动效果(简单易懂)
Mar 27 #Javascript
JS数组去重(4种方法)
Mar 27 #Javascript
JS实现隔行换色的表格排序
Mar 27 #Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 #Javascript
axios学习教程全攻略
Mar 26 #Javascript
js oncontextmenu事件使用详解
Mar 25 #Javascript
You might like
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php读取3389的脚本
2014/05/06 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python实现图片批量剪切示例
2014/03/25 Python
遗传算法python版
2018/03/19 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python 实现一个计时器
2020/07/28 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
写给保洁员表扬信
2014/01/08 职场文书
农村改厕实施方案
2014/03/22 职场文书
新法人代表任命书
2014/06/06 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
怎样写家长意见
2015/06/04 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
python区块链实现简版工作量证明
2022/05/25 Python
讨论nginx location 顺序问题
2022/05/30 Servers