详解Vue + Vuex 如何使用 vm.$nextTick


Posted in Javascript onNovember 20, 2017

vm.$nextTick

简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码。

//改变数据 
vm.message = 'changed' 
 
//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新 
console.log(vm.$el.textContent) // 并不会得到'changed' 
 
//这样可以,nextTick里面的代码会在DOM更新后执行 
Vue.nextTick(function(){ 
  console.log(vm.$el.textContent) //可以得到'changed' 
})

vm.$nextTick 的作用是将回调延迟到下次 DOM 更新循环之后执行。

正常在 ready/mounted 中获取数据, 那么操作是很简单的

ready() { // vue2 为 mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
    this.$nextTick(function () {
      // balabala
    })
  });
}

如果是用 vuex 的话, 由于vuex的数据操作都在 action 和 mutations, 然后在 ready/mounted 中调用 action 里的函数, 那么这时候该怎么用 vm.$nextTick 呢?

这时候我们就需要用到 Promise 了, 具体代码如下:

首页是api.js

export default {
  getFromConfig(config) {
    return $.ajax({ data: config })
  }
}

然后是action.js

export const getArticleList = ({dispatch}, config) => {
  return api.getFromConfig(config).then(({data}) => {
    dispatch(types.RECEIVE_ARTICLE, data, config.page)
  })
}

这里一定要加上return, 这样就可以返回一个Promise对象

最后是vue组件

methods: {
  loadMore(page = this.page) {
    var id = this.$route.params.id || ""
    Promise.all([
      this.getArticleList({
        id: id,
        page: page
      })
    ]).then(() => {
      this.$nextTick(function () {
        // balabala
      })
    })
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
js清理Word格式示例代码
Feb 13 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
webpack+vue中使用别名路径引用静态图片地址
Nov 20 #Javascript
laydate日历控件使用方法详解
Nov 20 #Javascript
JavaScript框架Angular和React深度对比
Nov 20 #Javascript
如何选择适合你的JavaScript框架
Nov 20 #Javascript
JavaScript内存泄漏的处理方式
Nov 20 #Javascript
加载 vue 远程代码的组件实例详解
Nov 20 #Javascript
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
opencv实现简单人脸识别
2021/02/19 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
小学三年级数学教学反思
2014/01/31 职场文书
超市开店计划书
2014/04/26 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL