使用场景:有些时候,我们使用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. python接口自动化(一)--什么是接口、接口优势、类型(详解)

    简介 经常听别人说接口测试,接口测试自动化,但是你对接口,有多少了解和认识,知道什么是接口吗?它是用来做什么的,测试时候要注意什么?坦白的说,笔者之前也不是很清楚.接下来先看一下接口的定义. 定义 接 ...

  2. 在linux(centos)系统安装nginx教程

    最近在切换服务器操作系统,简单记录一下 一.安装nginx需要如下环境  1.gcc  编译依赖gcc环境,如果没有gcc环境,需要安装gcc yum install gcc-c++  2.PCRE ...

  3. 【工利其器】必会工具之(一)Source Insight篇

    前言         “Source Insight(以下简称SI)是世界上最好的编辑器”,说这句话不知道会不会出门被打呢?-_- 中国古话说得好,“文无第一,武无第二”,所以不敢说SI是最好的,但是 ...

  4. springboot~jpa个性化数据操作接口

    jap是个全能仓储 jap把很多数据库访问都封装了,并且提交了默认的一切数据方法签名的约定,大家按着约定走,可以不写SQL语句,而如果比较复杂的情况,也需要写SQL,这里我们介绍一下查询和修改的实例方 ...

  5. matplotlib安装

    Windows / Linux pip 相关依赖 Python (>= 2.7 or >= 3.4) NumPy (>= 1.7.1) setuptools dateutil (&g ...

  6. SpringBoot轻松整合ElasticSearch

    完整项目代码地址(https://github.com/fonxian/spring-elasticsearch-example/tree/master/spring-elasticsearch-ex ...

  7. pm2通过配置文件部署nodejs代码到服务器

    一.pm2文档地址: http://pm2.keymetrics.io/ 二.在本地项目下新建ecosystem.config.js文件,并且推送到远端(记得node_modules这个文件夹也得推送 ...

  8. [转] 以后再有人问你selenium是什么,你就把这篇文章给他

    本文转自:https://blog.csdn.net/TestingGDR/article/details/81950593 写在最前面:目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论 ...

  9. 前后端分离密码登陆加密RSA方案(java后端)

    前言:密码加密有很多种方案,这里不做过多讨论,本篇文章是基于RSA加密实现. 首先在前端工程中需要引入加密js: "jsencrypt": "2.3.1",(注 ...

  10. Servlet练习:实现增删改查的综合练习

    ---恢复内容开始--- 本文为原创,转载请注明出处:https://www.cnblogs.com/Tom-shushu/p/9383066.html 本篇内容主要介绍:通过Servlet,JSP, ...