详解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 backgroundImage控制
May 19 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JavaScript中Function详解
Feb 27 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
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
怎样辨别一杯好咖啡
2021/03/03 新手入门
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
浅析node.js中close事件
2014/11/26 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python数据存储之 h5py详解
2019/12/26 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
研究生求职推荐信范文
2013/11/30 职场文书
高三语文教学反思
2014/01/15 职场文书
保研推荐信
2014/05/09 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
横空出世观后感
2015/06/09 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python