在谈nextTick之前,先要说明一件事,可能在我们平时使用vue时并没有关注到,事实上,vue执行的DOM更新是异步的

举个栗子:

 <template>
<div class="con">{{msg}}</div>
<template>
<script>
export default{
data(){
return{
msg:0,
}
},
mounted(){
this.msg = 1000;
console.log(document.querySelector(".con").innerHTML);
}
}
</script>

此时控制台打印的是数值是0;这时候如果你将代码改一下:

<template>
<div class="con">{{msg}}</div>
<template>
<script>
export default{
data(){
return{
msg:0,
}
},
mounted(){
this.msg = 1000;
setTimeout(function(){
console.log(document.querySelector(".con").innerHTML);
},0)
}
}
</script>

这时,控制台打印的数值为1000;这也就说明,vue的DOM更新是异步的,官网上是这样描述的:

可能你还没有注意到,Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。

而这次要谈的nextTick,其实就是上面setTimeout,目的也很简单,就是为了让DOM更新后立即执行一个回调函数:

<template>
<div class="con">{{msg}}</div>
<template>
<script>
export default{
data(){
return{
msg:0,
}
},
mounted(){
this.msg = 1000;
this.nextTick(() =>{
console.log(document.querySelector(".con").innerHTML);
})
}
}
</script>

控制台也会打印1000!

聊聊VUE中的nextTick的更多相关文章

  1. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  2. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  3. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  4. 详解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  5. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  6. 聊聊 Vue 中 provide/inject 的应用

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...

  7. 前端学习笔记系列一:3 Vue中的nextTick

    一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgD ...

  8. vue中的nextTick

    ​ 今天在浏览elementUI官网时,又一次看到了nextTick,其实nextTIck我已经不是第一次看到了,但之前都没怎么弄懂,这次决定好好研究一番-- 异步说明 vue是异步执行DOM更新的. ...

  9. 关于vue中的nextTick深入理解

    定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新 ...

随机推荐

  1. 【Alpha】——Seventh Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 将项目做成APK 用户界面改善 郑靖涛 协助设计账目一览表板块 用户界面改善 杨海亮 查询功能测试 用户界 ...

  2. 201521123071《java程序设计》第三周学习总结

    1. 本周学习总结 这周主要学习了构造函数,类与对象,就是这周事情很多,还没来得及好好复习,所以有很多知识都没有认识透彻.但我会尽力补上的. http://images2015.cnblogs.com ...

  3. 201521123080《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程: 操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己 ...

  4. 201521123070 《JAVA程序设计》第9周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 Q1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 ...

  5. 泛型在Web中的作用

    当我们写网页的时候,常常会有多个DAO,我们要写每次都要写好几个DAO,这样会有点麻烦. 那么我们想要的效果是什么呢??只写一个抽象DAO,别的DAO只要继承该抽象DAO,就有对应的方法了. 要实现这 ...

  6. mysql数据库-中文乱码问题解决方案

    来自:http://www.2cto.com/database/201108/101151.html MySQL会出现中文乱码的原因不外乎下列几点: .server本身设定问题,例如还停留在latin ...

  7. c#中的格式输出

    Reference:http://blog.csdn.net/fightfaith/article/details/48137235

  8. PHP 安装配置

    ./configure --prefix=/usr/local/php --with-libdir=/lib/x86_64-linux-gnu --with-config-file-path=/usr ...

  9. Laravel的Nginx重写规则完整代码

    laravel基本重写规则 location / { index index.html index.htm index.php; try_files $uri $uri/ /index.php?$qu ...

  10. JavaSE(十二)之IO流的字节流(一)

    前面我们学习的了多线程,今天开始要学习IO流了,java中IO流的知识非常重要.但是其实并不难,因为他们都有固定的套路. 一.流的概念     流是个抽象的概念,是对输入输出设备的抽象,Java程序中 ...