“约见”面试官系列之常见面试题之第八十六篇之nexttick(建议收藏)
一、用途
应用场景:需要在视图更新之后,基于新的视图进行操作。
this.$nextTick()
方法主要是用在数据改变,dom
改变应用场景中。vue中数据和dom
渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()
的回调函数中。created()
中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异于徒劳,所以,此时this.$nextTick()
就会被大量使用,而与created()
对应的是mounted()
的钩子函数则是在dom完全渲染后才开始渲染数据,所以在mounted()
中操作dom基本不会存在渲染问题。
二、官方说明:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
三、原理:
this.$nextTick()
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick
一样,不同的是回调的 this 自动绑定到调用它的实例上。
假设我们更改了某个dom
元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout(fn, 0)
中;
异步说明
事件循环说明
实例
(1)实例一
<template><section><div ref="hello"><h1>Hello World ~</h1></div><el-button type="danger" @click="get">点击</el-button></section>
</template>
<script>export default {methods: {get() {}},mounted() {console.log(333);console.log(this.$refs['hello']);this.$nextTick(() => {console.log(444);console.log(this.$refs['hello']);});},created() {console.log(111);console.log(this.$refs['hello']);this.$nextTick(() => {console.log(222);console.log(this.$refs['hello']);});}}
</script>
可以根据打印的顺序看到,在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM
操作并无作用,而在created()里使用this.$nextTick()
可以等待dom生成以后再来获取dom对象
(1)实例二
<template><section><h1 ref="hello">{{ value }}</h1><el-button type="danger" @click="get">点击</el-button></section>
</template>
<script>export default {data() {return {value: 'Hello World ~'};},methods: {get() {this.value = '你好啊';console.log(this.$refs['hello'].innerText);this.$nextTick(() => {console.log(this.$refs['hello'].innerText);});}},mounted() {},created() {}}
</script>
根据上面的例子可以看出,在方法里直接打印的话, 由于dom元素还没有更新, 因此打印出来的还是未改变之前的值,而通过this.$nextTick()
获取到的值为dom更新之后的值
本面试题为前端常考面试题,后续有机会继续完善。我是歌谣,一个沉迷于故事的讲述者。
欢迎一起私信交流。
“睡服“面试官系列之各系列目录汇总(建议学习收藏)
“约见”面试官系列之常见面试题之第八十六篇之nexttick(建议收藏)相关推荐
- “约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用(建议收藏)
那么vue 生命周期有哪些阶段呢 一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
- “约见”面试官系列之常见面试题之第八十五篇之css响应式(建议收藏)
响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 1 2 3 4 5 6 7 8 9 all:所有媒体 braille:盲文触觉设备 ...
- “约见”面试官系列之常见面试题之第八十四篇之手写promise(建议收藏)
class Promise{constructor(excutor){this.value = '';this.reason = '';this.status = 'padding'this.onFu ...
- “约见”面试官系列之常见面试题之第八十二篇之MVC(建议收藏)
MVC设计模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller) ...
- “约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法 (建议收藏)
vue-router中的路由钩子函数基本用法 路由钩子函数分为三种类型如下: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { consol ...
- “约见”面试官系列之常见面试题之第五十六篇之typeof返回的数据类型(建议收藏)
typeof 共返回6种数据格式: 1.object 2.undefined 3.string 4.number 5.boolean 6.function 特别注意Array和null返回的都是obj ...
- “约见”面试官系列之常见面试题之第四十六篇web标准理解和认识(建议收藏)
web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构.表现即指css样式表,通过css可以是页面的结构标签更具 ...
- “约见”面试官系列之常见面试题之第八十八篇之什么是vue生命周期(建议收藏)
我们知道vue是一个构建数据驱动的 web 界面的渐进式框架,那么vue生命周期是什么呢?本篇文章就给大家来介绍一下vue生命周期的内容,希望可以帮助到有需要的朋友. vue生命周期是什么? Vue生 ...
- “约见”面试官系列之常见面试题之第八十篇之css常见属性(建议收藏)
CSS3增加的新的属性和新属性值很多,其中的重点,比如Flex布局,2D3D效果,关键帧动画等,我们会在其他篇拿出来详细讲解,并附上实例和代码,供大家参考学习.本文只介绍其他常用且兼容性良好(IE9及 ...
最新文章
- C - 食物链 POJ - 1182
- Memcached深度分析【转载】
- 重写equals方法时必须重写hashcode方法吗
- 什么时候用到全排列_请问在排列组合中,在什么情况下要乘以全排列
- 什么东西都要用一句话总结出来:这是最重要的
- 关于微信支付的退款那些事
- eureka源码:开启服务注册
- Drupal 自定义主题实体 Theming Custom Entities
- 外观模式(Façade Pattern)
- 如何从零搭建一个hexo博客网站01
- 95-50-020-java.nio.channels-NIO-NIO概览
- 拼多多店铺等级怎么提升?店盈通来告诉你
- 如何理解泊松分布(Poisson Distribution)
- 甲骨文裁员后应该怎样发展后来的路?
- CentOS7安装Chrome浏览器
- 9.4 双向深度循环神经网络
- Linux故障——开机显示!!!failed to loadSELinux policy,freezing...
- win7 android studio 升级HAXM后无法启动安卓模拟器
- 【年入百万】我用真人真事谈谈用脑子赚钱
- Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Contr
热门文章
- IE请求json数据时出现下载文件的现象。
- Android Service 生命周期
- (转载)Android两种Tab分页的方式:TabActivity和ActivityGroup以及Android项目几种常见的应用架构...
- Spring 注解AOP 入门
- 计算平面坐标某点(x,y)与原点(0,0)的角度
- Oracle分析函数六——数据分布函数及报表函数
- nacos怎么修改服务分组_Nacos(六):多环境下如何“管理”及“隔离”配置和服务...
- linux程序已经在后台运行冻结了_如何使程序在Linux后台运行
- 如何制作印章_如何用Photoshop制作个性印章/文字图片
- php缓存注入,利用Thinkphp 5缓存漏洞实现前台Getshell