使用场景:有些时候,我们使用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. 【重学计算机】计组D2章:数据表示

    1.基本概念 真值:+0101,-0100:机器数: [x]原=0101 2.几种机器数 原码:x = -0101,[x]原 = 1101 反码:x = -0101,[x]反 = 1010 补码:x ...

  2. [区块链] 带你进入Bitcoin开发 - 环境搭建

    学习完区块链枯燥乏味的.高深的.必备的基础知识后,终于可以走上开发之路了!真是迫不及待啦!之后博客更新主要放在区块链的开发上,相信这才是大多数同学更加感兴趣的地方!学习过程从最经典的区块链鼻祖-比特币 ...

  3. 从零开始学习PYTHON3讲义(十一)计算器升级啦

    (内容需要,本讲中再次使用了大量在线公式,如果因为转帖网站不支持公式无法显示的情况,欢迎访问原始博客.) <从零开始PYTHON3>第十一讲 第二讲的时候,我们通过Python的交互模式来 ...

  4. 『集群』007 如何测试Slithice源代码

    如何测试Slithice源代码 直接测试 >你可以直接 进入 “集合编译区”,这里面 已经有 编译好的 所有程序集: >部署 配置数据库: >附加 集合编译区 中的 SQLServe ...

  5. 【译】最大限度地降低多线程 C# 代码的复杂性

    分支或多线程编程是编程时最难最对的事情之一.这是由于它们的并行性质所致,即要求采用与使用单线程的线性编程完全不同的思维模式.对于这个问题,恰当类比就是抛接杂耍表演者,必须在空中抛接多个球,而不要让它们 ...

  6. JavaScript基础-3

    3 运算符 按照个数分类可分为:一元运算符.二元运算符.三元运算符: 按照功能分类可分为:算数运算符.自增运算符.比较运算符.逻辑运算符.赋值运算符: 3.1 算数运算符 算术运算符包含了加减乘除,符 ...

  7. 使用 MapTiler 进行地图切片

    在GIS开发中接触比较多的就是切图与发布,通常大家使用的是GlobalMapper.ArcGIS.GDAL等. 一般在使用Leaflet.js或其他框架开发时,使用的是TMS切片格式,大佬们基本用GD ...

  8. Android远程桌面助手(B1371)

    Android远程桌面助手(B1371),下载:https://files.cnblogs.com/files/we-hjb/ARDC%28B1371%29.7z 1.增加了对超大分辨率4320*21 ...

  9. 深入理解Java中的不可变对象

    深入理解Java中的不可变对象 不可变对象想必大部分朋友都不陌生,大家在平时写代码的过程中100%会使用到不可变对象,比如最常见的String对象.包装器对象等,那么到底为何Java语言要这么设计,真 ...

  10. XE5 搭建DataSnap服务

    1   准备工作 1.1 环境准备 XE5或XE7,操作系统Windows7(64位)操作系统. 数据库MSSQL选择SQLServer2008. 如果数据库服务没有在开发电脑上,则需要在开发电脑上安 ...