最近在学习vue.js。了解1.x的基础上再学习2.x的vue。两个版本的确是不会像angular这样1.x和2.x相差甚远。所以学习起来其实还是有很大的关联。但是,终归来说。两者还是有语法上的细微差别的。但是对于此处讲的$nextTick()函数来说,两者并没有什么区别。前两天瞟到了一眼这个 $nextTick这个玩意儿,但是至于它是干什么的,还是不清楚。然后今天在练习项目中就用到了。自己也稍微的去了解了一下。以此做记录。

vue.js中更新数据是异步更新的。在这种情况下,如果我们想一打开加载、渲染页面就实现某种和dom相关的效果。我们知道这个时候需要把相关的代码放到vue的生命周期的created钩子函数中:执行。然而因为异步的原因。这个时候页面并未开始渲染。你就想对某个dom元素实现某种特殊的效果的话,结果就会是徒劳的。这一点形象点描述的话,可以说此时dom元素还在堵车的路上还没有到页面上呢,你就点着他的名字要他做事。那结果肯定是事情也没有做成。因为他人都还没到呢。这个时候$nextTick就出场了,它实质上是一个回调函数,回调函数就意味着把dom元素的相关实现放在这里面的话,它会等着dom来了,才会开始让他做事。那这就很好的解决了页面的异步渲染问题。

解释了$nextTick的用法,那么它的使用场景就是当页面还未渲染的时候,比如created,或者mounted(未全部渲染完成)钩子状态的时候有与dom相关的操作的话。此时就需要使用到$nextTick.

补充:

在vue中还是可以获取原生js的dom元素的。在1.x和2.x版本中的获取方式稍有差异。

1.x

在template模板中如下

<div  v-el:"my-dom"></div>

在script中

this.$els.myDom;//dom获取到dom元素,  注意script中需要使用驼峰命名

2.x

在template模板中如下

<div  ref="mydom"></div>

在script中

this.$refs.mydom ;//2.x获取dom元素,不用使用驼峰命名

Vue.js $nextTick的更多相关文章

  1. vue中nextTick

    vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...

  2. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  3. vue的nextTick的实现

    vue的nextTick是用浏览器支持的方法模拟nodejs的process.nextTick 老版本的vue用如下方法来模拟 Promise.thenMutationObserver(Mutatio ...

  4. 1- js vue.js

    1 js 2  Vue.js

  5. Vue中nextTick()解析

    最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class=&quo ...

  6. Vue的nextTick是什么?

    公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...

  7. 【vue】nextTick源码解析

    1.整体入手 阅读代码和画画是一样的,忌讳一开始就从细节下手(比如一行一行读),我们先将细节代码折叠起来,整体观察nextTick源码的几大块. 折叠后代码如下图 整体观察代码结构 上图中,可以看到: ...

  8. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  9. 基于源码分析Vue的nextTick

    摘要:本文通过结合官方文档.源码和其他文章整理后,对Vue的nextTick做深入解析.理解本文最好有浏览器事件循环的基础,建议先阅读上文<事件循环Event loop到底是什么>. 一. ...

  10. vue之nextTick全面解析

    vue的第一篇文章,介绍一下简单的nextTick方法的实现原理 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框 ...

随机推荐

  1. Win10 安装 digits

    安装caffe配置python接口 接下来就按照官方教程来安装了... 1. If the installation process complains compiler not found, you ...

  2. POJ 2853

    #include<iostream> #include<stdio.h> #include<vector> #include<math.h> #incl ...

  3. 消息队列系统 -- RabbitMQ

    消息队列系统 -- RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Que ...

  4. 【原创】SQL Server 性能调优读书笔记

    CPU 100%: 有时可能是硬盘性能不足,或者内存容量不够,让CPU一直忙于I/O. 导致性能问题的一些因素: 用户习惯:在运行尖峰时刻做一些不必做但消耗资源的事情,如之行数据库完整备份,如在服务器 ...

  5. python使用(三)

    1.function_option.py2.function_code_option.py3.thread_option.py4.class_option.py5.threading_option.p ...

  6. COM+时代的自动事务

    最近看公司的遗留项目代码,调试的时候发现经常报分布式事务错误,可是整个代码里没有看见开启过事务,于是开始研究,发现了这个.Net Framework1.1时代的产物. namespace Busine ...

  7. PLSQL Developer是什么?

    不多说,直接上干货! PLSQL Developer是一款可以帮助用户管理Oracle数据库开发存储程序单元的集成开发环境IDE,通过该软件,用户可以编辑.编译.纠正.测试.调试.优化.查询您的数据信 ...

  8. 数据库设计 Step by Step (2)——数据库生命周期

    引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整 ...

  9. docker-dockerfile使用

    使用 centos基础镜像, 构建dockerfile-ngix 简单说, 就是把需要做的东西写下来, 然后build的时候, 自动运行 一般包含:  基础镜像信息 维护者信息 镜像操作指令 容器启动 ...

  10. 第2章 Selenium2-java 测试环境搭建

    2.1  Window下环境搭建 2.1.1 安装Java 2.1.2 安装Eclipse (网上资源很多,就不详将了). 2.1.3 下载Java版的Selenium包. 下载地址:http://d ...