详解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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
js获取 type=radio 值的方法
May 09 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php合并js请求的例子
2013/11/01 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
javascript的函数作用域
2014/11/12 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python 实现try重新执行
2019/12/21 Python
python批量修改xml属性的实现方式
2020/03/05 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
安全资料员岗位职责
2013/12/14 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
银行贷款承诺书
2014/03/29 职场文书
安全月活动总结
2014/05/05 职场文书
大学新生入学教育方案
2014/05/16 职场文书
医院合作协议书
2014/08/19 职场文书
开会通知短信大全
2015/04/20 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Django中session进行权限管理的使用
2021/07/09 Python