使用场景:有些时候,我们使用vue修改了一些数据,但是页面上的DOM还没有更新,这个时候我们就需要使用到nextTick。

vm.$nextTick( [callback] )

说明:

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})

2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不是原生支持 Promise (IE:你们都看我干嘛),你得自行 polyfill。

Vue.nextTick()
.then(function () {
// DOM 更新了
})
nextTick的使用还有个小小的技巧,我们在生命周期mounted里面渲染的时候,不能百分百保证所有的自组件都能被渲染,所以我们可以在mounted里面使用 vm.$nextTick,这样就能确保所有的子组件都能被渲染到了。
(mounted钩子在服务器端渲染期间不被调用。)
同样的可以在updated这个钩子做一样的操作。
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
 

vue 修改数据界面没有及时更新nextTick的更多相关文章

  1. vue 修改数据

    通过数组中的方法改变数据 变异方法(改变原数组) push() pop() shift() unshift() splice() sort() reverse() 替换数组(生成新数组) filter ...

  2. problem:vue之数据变更没有触发视图更新问题

    前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...

  3. Vue之数据传递

    基础:vue的响应式规则 简单的props更新 父组件 <template> <div> <block-a :out-data="x">< ...

  4. vue响应数据的原理

    vue最大的特点就是数据驱动视图. vue的数据改变,页面一定发生改变?不一定. 当操作引用类型的数据,动态添加属性时,页面不会发生改变. vue响应式数据原理(也叫数据绑定原理.双向数据绑定原理): ...

  5. vue数组更新界面无变化

    1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...

  6. vue 改变数据DOM不更新,获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

  7. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

  8. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  9. vue实现数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

随机推荐

  1. 《IDEO,设计改变一切》(Change By Design)- 读书笔记

    一.关于IDEO与设计思维 IDEO是一家世界顶级创意公司,而作者蒂姆布朗是IDEO的CEO.当然,在未阅读本书之前,我都是不知道的,也不会主动去了解IDEO和蒂姆布朗的.那么,我为什么要去读这样一本 ...

  2. 【朝花夕拾】四大组件之(二)Service篇

    一.Service是什么 对于这个问题,想必大家都能说出一二,如“它是四大组件之一”.“在后台处理一些操作”等.咱们这里看看官方文档中的描述,官方语言一般都是准确且言简意赅的,这里可以体验一下其风格. ...

  3. LindDotNetCore~Aspect面向方面编程

    回到目录 Aspect面向方面编程 面向侧面的程序设计(aspect-oriented programming,AOP,又译作面向方面的程序设计.观点导向编程.剖面导向程序设计)是计算机科学中的一个术 ...

  4. Tomcat 对 HTTP 协议的实现(下)

    在<Tomcat 对 HTTP 协议的实现(上)>一文中,对请求的解析进行了分析,接下来对 Tomcat 生成响应的设计和实现继续分析.本文首发于(微信公众号:顿悟源码) 一般 Servl ...

  5. C#工具:WPF生成图片验证码

    1.使用ImageFormatConvertHelper using System; using System.Collections.Generic; using System.Drawing; u ...

  6. C#根据屏幕分辨率改变图片尺寸

    最近工作中遇到一个问题,就是需要将程序文件夹中的图片根据此时电脑屏幕的分辨率来重新改变图片尺寸 以下为代码实现过程: 1.获取文件夹中的图片,此文件夹名为exe程序同目录下 //读取文件夹中文件 Di ...

  7. react异步加载组件

    1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...

  8. Android Interpolator解析

    本文部分图片转自:https://blog.csdn.net/lgaojiantong/article/details/39451243 目录 自定义插值器 系统插值器 1. 自定义插值器 要自定义插 ...

  9. 你不可不知的Java引用类型之——Reference源码解析

    定义 Reference是所有引用类型的父类,定义了引用的公共行为和操作. reference指代引用对象本身,referent指代reference引用的对象,下文介绍会以reference,ref ...

  10. Spring AOP 整理笔记

    一.AOP概念 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. 利用AOP可以对业务逻辑的各 ...