前端学习笔记系列一:3 Vue中的nextTick
一、示例
先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。
模板
<div class="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
Vue实例
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''
},
methods: {
changeMsg() {
this.msg = "Hello world."
this.msg1 = this.$refs.msgDiv.innerHTML
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML
})
this.msg3 = this.$refs.msgDiv.innerHTML
}
}
})
点击前、后
从图中可以得知:msg1和msg3显示的内容还是变换之前的,而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是异步的(详细解释在后面)。
二、应用场景
下面了解下nextTick的主要应用的场景及原因。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
具体原因在Vue的官方文档中详细解释:
Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0)代替。
例如,当你设置vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
具体vue源码解释可见:https://www.jianshu.com/p/a7550c0e164f
前端学习笔记系列一:3 Vue中的nextTick的更多相关文章
- 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题
由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 前端学习笔记系列一:7 在vscode中根据vue等模板生成代码
目标:希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法:打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索 ...
- 前端学习笔记系列一:4 vue中@click.native
.native - listen for a native event on the root element of component. 作用:[给组件绑定原生事件] 例子:如果使用router-l ...
- 前端学习笔记系列一:5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
- 前端学习笔记系列一:2 Vue的单文件组件
(1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...
- 前端学习笔记系列一:14 vue3.X中alias的配置
第一步: 第二步: // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/a ...
- 前端学习笔记系列一:12 js中获取时间new date()的用法
获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.get ...
- 前端学习笔记系列一:9 js中数组的拷贝
拷贝分为浅拷贝和深拷贝,在JavaScript中能够实现这两种拷贝的方式也是多种多样.以下是一维数组实现深拷贝和浅拷贝的各种方式. 一.浅拷贝 1.赋值 赋值是最直接的一种浅拷贝. let arr3 ...
随机推荐
- Servlet的基本使用
1.pom.xml导入包 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax ...
- (转)__attribute__之section 分析详解
原文地址:__attribute__之section详解 前言 第一次接触 "section" 是在公司的一个STM32的项目代码中,前工程师将所有的初始化函数都使用的" ...
- 在Windows上使用Docker运行.NET COE应用
在Windows上使用Docker运行.NET COE应用 执行步骤: 1:安装Docker For Windows(注意:docker for windows-64位Windows 10.必须开启 ...
- 阿里大数据竞赛非官方指南第三弹-- LR入门
最近忙着赶global comm的deadline无暇比赛,当有功夫回过头来看的时候发现比赛已经夹杂了很多非技术的因素在里面了,就连我这个本来是写博客拉粉丝的也有点小不爽.本着我的初心是写博客拉粉丝, ...
- 软件架构,WEB - REST架构,RESTful API
参考 https://www.zhihu.com/question/27785028/answer/48096396 wiki太学术化了 http://www.ruanyifeng.com/blog/ ...
- CSP2019 滚粗记
目录 CSP 2019 游记 DAY 0 DAY 1 DAY 2 CSP总结 自测之后 CSP 2019 游记 坐标:GD,GZ 人物:hyf 组别:J和S 任务:划水 目标:划水 任务奖励:退役证书 ...
- unique() 函数详解
简介 顾名思义,unique,独一无二的.这个函数可以对容器中的元素进行"去重". 但是需要注意,这里的"去重",并没有把重复的元素删除,只是不重复的元素放到了 ...
- Java通过反射实现实例化
public static void main(String[] args) throws Exception { User user= (User) test(User.class); System ...
- hadoop程序理解
1.利用hadoop的API写程序 驱动程序中利用hadoop的API,获取配置,默认会根据HADOOP_HOME环境变量指定的HADOOP主目录下/etc/hadoop加载配置文件 2.启动利用 - ...
- ab的压力测试(转)
其中-n代表请求数,-c代表并发数 返回结果: ##首先是apache的版本信息 This is ApacheBench, Version 2.3 <Revision:655654> Co ...