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

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
      })
    })
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js全局API之nextTick全面解析

    vue.js全局API之nextTick全面解析

    官方介绍:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 就是DOM更新完成之后执行的方法,并且超级方便的事情是回调函数中的this会绑定到最新的vue实例上. 代码示例如下: <p ref="mgs">{{mgs}}</p> <button @click="updateDom">点击更新DOM</button> data:function () { return

  • vue之nextTick全面解析

    简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过.我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom.因为赋值操作只完成了数据模型的改变并没有完成视图更新.在这个时候我们需要用到本章介绍的函数. 为什么要用nextTick 请看如下一段代码 new Vue({ el:

  • Vue中之nextTick函数源码分析详解

    1. 什么是Vue.nextTick()? 官方文档解释如下: 在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"&

  • 详解从Vue.js源码看异步更新DOM策略及nextTick

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出,

  • 关于Vue.nextTick()的正确使用方法浅析

    本文主要给大家介绍了关于Vue.nextTick()的正确使用,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM,获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个获取更新后的D

  • 浅谈Vue.nextTick 的实现方法

    这是一篇继event loop和MicroTask 后的vue.nextTick API实现的源码解析. 预热,写一个sleep函数 function sleep (ms) { return new Promise(resolve => setTimeout(resolve, ms) } async function oneTick (ms) { console.log('start') await sleep(ms) console.log('end') } oneTick(3000) 解释下

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

    vm.$nextTick 简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新.所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码. //改变数据 vm.message = 'changed' //想要立即使用更新后的DOM.这样不行,因为设置message后DOM还没有更新 console.log(vm.$el.textCo

  • 详解vue+vuex+koa2开发环境搭建及示例开发

    写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st

  • 详解vue + vuex + directives实现权限按钮的思路

    遇到了一个业务场景: 某个按钮按下去之前需要先判断它是否登陆,如果没有登陆需要跳转到对应的登陆页面,否则就继续该按钮之后的操作. 对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和vuex完成了相应的实现. 主要的代码实现 const directive = Vue.directive('permission-click', { bind: (el, binding, vnode) => { el.addEventListener('click', (e) => { i

  • 详解Vue中$refs和$nextTick的使用方法

    详解Vue中$refs和$nextTick的使用方法

    目录 1.$refs简介 $refs获取DOM元素 $refs获取组件对象 2.$nextTick基本使用 vue异步更新DOM 利用$nextTick解决以上问题 $nextTick使用场景 1.$refs简介 $refs是vue提供的获取真实dom的方法. $refs获取DOM元素 [使用步骤]: 在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素 [代码演示]: <template> <div> <h1>获取原生的DOM元素</h1

  • 详解Vue文档中几个易忽视部分的剖析

    针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解vue高级特性

    Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    一.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了.   值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. 1.为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex, 实际上数据还

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • 详解Vue的异步更新实现原理

    详解Vue的异步更新实现原理

    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会有跳转的过程. 怎么可以让页面上有从1到100显示的过程呢,就是用setTimeout或者Promise.then等方法去模拟. 讲道理,如果不在vue里,单独运行这段程序的话,输出一定是从1到100,但是为什么在vue中就不一样了呢? for(let i=1; i<=100; i++){ console.

随机推荐