vue 修改数据界面没有及时更新nextTick
使用场景:有些时候,我们使用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的更多相关文章
- vue 修改数据
通过数组中的方法改变数据 变异方法(改变原数组) push() pop() shift() unshift() splice() sort() reverse() 替换数组(生成新数组) filter ...
- problem:vue之数据变更没有触发视图更新问题
前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
- Vue之数据传递
基础:vue的响应式规则 简单的props更新 父组件 <template> <div> <block-a :out-data="x">< ...
- vue响应数据的原理
vue最大的特点就是数据驱动视图. vue的数据改变,页面一定发生改变?不一定. 当操作引用类型的数据,动态添加属性时,页面不会发生改变. vue响应式数据原理(也叫数据绑定原理.双向数据绑定原理): ...
- vue数组更新界面无变化
1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...
- vue 改变数据DOM不更新,获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
随机推荐
- 7.Flask文件上传
1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...
- 我眼中的 Nginx(一):Nginx 和位运算
作者张超:又拍云系统开发高级工程师,负责又拍云 CDN 平台相关组件的更新及维护.Github ID: tokers,活跃于 OpenResty 社区和 Nginx 邮件列表等开源社区,专注于服务端技 ...
- RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...
- openLayers 3知识回顾
openlayers 知识 前段时间帮助同事重构一个地图类的项目,然后就学习了openLayer3这个框架,但是官网上没有中文版,也没有详细的例子解释,我只能遇到看不懂的就翻译成中文来用,为了方便以后 ...
- springboot~zuul实现网关
网关在微服务里的角色 在微服务架构体系里,网关是非常重要的一个环节,它主要实现了一些功能的统一处理,包括了: 统一授权 统一异常处理 路由导向 跨域处理 限流 实践一下 1 添加依赖 dependen ...
- netstat命令总结
nestat介绍 netstat是一款命令行工具,可用于列出系统上所有的网络套接字连接情况,包括 tcp, udp 以及 unix 套接字,另外它还能列出处于监听状态(即等待接入请求)的套接字. 使用 ...
- C# Lambda表达式和linq表达式 之 匿名对象查询接收
很多小伙伴都用过Lambda表达式和linq表达式,用起来也得心应手,但是有的小伙伴 对匿名对象的查询与接收比较迷茫,(没有定义相应的实体),怎么在where()里面进行 条件筛选呢?常规用法我就不说 ...
- 结对开发nabcd
各位领导/投资人/用户/合作伙伴: 我们的产品校园生活 是为了解决 广大在校师生对于信息难以得到的痛苦,他们需要了解有关于学校开办的各种活动的信息还有各种二手商品的交换信息,他们也需要一个公开的平台 ...
- SQLServer事务在C#当中的应用
1:事务是什么 事务指的是一系列SQL操作的逻辑工作单元,,要么完全地执行,要么完全地不执行. 一个逻辑工作单元必须有4个属性,原子性(Atomic).一致性(Consistent).隔离型(Isol ...
- Ubuntu16.04安装Qt5.12.2
第一步:下载文件 https://download.qt.io/official_releases/qt/5.12/5.12.2/ 第二步:安装依赖库 sudo apt-get install bui ...