vue中的nextTick
今天在浏览elementUI官网时,又一次看到了nextTick,其实nextTIck我已经不是第一次看到了,但之前都没怎么弄懂,这次决定好好研究一番……
异步说明
- vue是异步执行DOM更新的。vue实现响应式并不是数据发生改变之后DOM立即变化,而是按一定的策略进行DOM更新
示例说明
<div id=app>
<div id="div" v-if="showDiv">我是显示文本</div>
<button @click="showAndGetText">获取内容</button >
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
showDiv : false
},
methods: {
showAndGetText () {
this.showDiv = true
let text = document.getElementById('div').innerHTML
console.log(text)
}
}
}
})
</script>
在该示例中,控制台会抛出一个
innerHTML of null
的错误,这是由于此时页面并未完成渲染,它并没有获取到这个div元素。
在vue中,并不是数据一更新,DOM就立即更新,页面立即渲染,而是当一个事件循环结束后,DOM才会完成更新,页面才会成功渲染;
如通过一个for循环改变一个数据,即使这个for循环100次,DOM也只会在第100次时才更新,而不是循环100次,DOM就更新100次。
在本次示例中,若想成功获取到这个div元素,就需引入今日主角"
nextTick
"
nextTick的定义
- 在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法,即可获取到更新后的DOM。
上一示例结合nextTick使用
- 通过this.$nextTick()调用的代码直接进入下一个tick,相对于下一个tick,当前tick中的DOM已完成更新。
showAndGetText () {
this.showDiv = true
this.$nextTick(()=>{
let text = document.getElementById('div').innerHTML
console.log(text)
})
}
成功显示出这个div元素的文本信息
vue中的nextTick的更多相关文章
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- 详解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- 前端学习笔记系列一:3 Vue中的nextTick
一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgD ...
- 聊聊VUE中的nextTick
在谈nextTick之前,先要说明一件事,可能在我们平时使用vue时并没有关注到,事实上,vue执行的DOM更新是异步的. 举个栗子: <template> <div class=& ...
- 关于vue中的nextTick深入理解
定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新 ...
- vue中的$nextTick的常用思路
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextT ...
- Vue中的nextTick()浅析
引言 在开发过程中,我们经常遇到这样的问题:我明明已经更新了数据,为什么当我获取某个节点的数据时,却还是更新前的数据? 一,浅析 为什么会这样呢?带着这个疑问先往下看. 先看一个小的例子: <d ...
随机推荐
- android消息线程和消息队列
基于消息队列的线程通信: 消息队列与线程循环 MessageQueue: 利用链表来管理消息. Mess ...
- 为什么是InfluxDB | 写在《InfluxDB原理和实战》出版之际
1年前写的一篇旧文,文中的分析,以及探讨的问题和观点,至今仍有意义. 从2016年起,笔者在腾讯公司负责QQ后台的海量服务分布式组件的架构设计和研发工作,例如微服务开发框架SPP.名字路由CMLB.名 ...
- Cookie实现记住密码、自动登录
前端代码 <form id="form" action="xxx" method="post"> <div> < ...
- Mybatis中由于${}直接注入引发的问题
一.问题引入 我们先来看这段代码,我想从取值为${category}的表中查询全部信息. @Mapper public interface CategoryMapper { @Select(" ...
- 时间同步chrony,最全最细
时间同步服务 多主机协作工作时,各个主机的时间同步很重要,时间不一致会造成很多重要应用的故障,如:加密协 议,日志,集群等, 利用NTP(Network Time Protocol) 协议使网络中的各 ...
- java例题_16 九九乘法表
1 /*题目:输出 9*9 口诀. 2 程序分析:分行与列考虑,共 9 行 9 列,i 控制行,j 控制列. 3 */ 4 5 /*分析 6 * 用两侧for循环,外层循环还要控制换行 7 * 换行时 ...
- Kubernetes 实战 —— 05. 服务:让客户端发现 pod 并与之通信(下)
将服务暴露给外部客户端 P136 有以下三种方式可以在外部访问服务: 将服务的类型设置成 NodePort 将服务的类型设置为 LoadBalance 创建一个 Ingress 资源 使用 NodeP ...
- lustre文件系统环境搭建及测试
目录 1.节点角色 2.硬件配置 3.软件版本 4.安装软件包 4.1.安装 e2fsprogs 相关包 4.2.安装 kernel 相关包 4.3.客户端安装 4.4.服务器端安装 4.5.配置 5 ...
- python程序—一键部署keepalived+lvs
一个DS 两个RS keepalived端在/root下准备好已经修改好的配置文件 import paramiko # keepalived端 需要修改的信息 keepalived_ip='192.1 ...
- 7. Centos7 yum 出现could not retrieve mirrorlist 最终解决方案
Step 1: sudo vi /etc/sysconfig/network-scripts/ifcfg-ens33 Step 2: 将ONBOOT改为yes,wq!保存退出 Step 3:重启ne ...