详解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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
原生js实现吸顶效果
Mar 13 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
js实现盒子滚动动画效果
Aug 09 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实现jQuery扩展函数
2009/10/30 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python机器学习库常用汇总
2017/11/15 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
自动一体化专业求职信
2014/03/15 职场文书
广播体操比赛口号
2014/06/10 职场文书
质量月口号
2014/06/20 职场文书
毕业生找工作求职信
2014/08/05 职场文书
教师网络培训心得体会
2016/01/09 职场文书