详解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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue自定义filters过滤器
Apr 26 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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 404错误页面实现代码
2009/06/22 PHP
php foreach、while性能比较
2009/10/15 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
UserData用法总结 lanyu出品
2010/07/01 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
就业自荐信
2013/12/04 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
二年级小学生评语
2014/04/21 职场文书
法人任命书范本
2014/06/04 职场文书
本科生求职信
2014/06/17 职场文书
教师师德表现自我评价
2015/03/05 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python