详解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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
Javascript浅谈之this
Dec 17 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
Underscore源码分析
Dec 30 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JavaScript布尔运算符原理使用解析
May 06 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常用代码大全(新手入门必备)
2010/06/29 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
详解Python IO编程
2020/07/24 Python
python中if嵌套命令实例讲解
2021/02/25 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
盛大二次面试题
2016/11/18 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
祝酒词范文
2015/08/12 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS