详解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 相关文章推荐
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
js控制框架刷新
2008/08/01 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
django+mysql的使用示例
2018/11/23 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python实现控制COM口的示例
2019/07/03 Python
python实现两个文件夹的同步
2019/08/29 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
平面设计专业求职信
2014/08/09 职场文书
生产操作工岗位职责
2014/09/16 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
导游词范文
2015/02/13 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书