详解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 函数式编程的原理
Oct 16 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
你准备好迎接vue3.0了吗
Apr 28 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/03 咖啡文化
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python如何实现文本转语音
2016/08/08 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
年会搞笑主持词
2014/03/27 职场文书
企业法人任命书
2015/09/21 职场文书
预备党员表决心的话
2015/09/22 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
索尼ICF-5900W收音机测评
2022/04/24 无线电
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js