详解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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 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
destoon官方标签大全
2014/06/20 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
初步讲解Python中的元组概念
2015/05/21 Python
浅谈python对象数据的读写权限
2016/09/12 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python 通配符删除文件的实例
2018/04/24 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python assert语句的简单使用示例
2019/07/28 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
flask开启多线程的具体方法
2020/08/02 Python
Linux的文件类型
2012/03/07 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
学生期末评语大全
2014/04/30 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
中学生检讨书范文
2014/11/03 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书