首先我们先来看看官方介绍的用法:

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

理解:

1.总结来说, 假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,

也就好比我们将打印输出的代码放在setTimeout(fn, 0)中;

具体代码如下(代码放在一个组件内):

<template>
<button ref="tar" type="button" name="button" @click="testClick">{{ content }}</button>
</template>
export default {
data(){
return {
content: '初始值'
}
}
}
methods: {
testClick(){
this.content = '改变了的值';
// 这会直接打印的话, 由于dom元素还没有更新, 因此打印出来的还是未改变之前的值;
console.log(that.$refs.tar.innerText);//初始值
}
}
2.this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
// 方法
methods: {
testClick(){
this.content = '改变了的值';
this.$nextTick(() => {
// dom元素更新后执行, 因此此处能正确打印出更改之后的值;
console.log(that.$refs.tar.innerText); //改变了的值
})
}
}

this.$nextTick的更多相关文章

  1. 理解 Node.js 里的 process.nextTick()

    有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...

  2. Node.js学习笔记:setImmediate与process.nextTick

    通过process.nextTick注册的函数在当前这个事件循环中执行的函数执行完毕后立即执行,相当于把当前的同步代码执行完毕之后,立刻执行所有的通过process.nextTick注册的函数,如果注 ...

  3. Node.js的process.nextTick(callback)理解

    Node.js是单线程的,基于事件循环,非阻塞 IO的.事件循环中使用一个事件队列,在每个时间点上,系统只会处理一个事件,即使电脑有多个CPU核心,也无法同时并行的处理多个事件.因此,node.js适 ...

  4. setTimeout,setInterval,process.nextTick,setImmediate in Nodejs

    Nodejs的特点是事件驱动,异步I/O产生的高并发,产生此特点的引擎是事件循环,事件被分门别类地归到对应的事件观察者上,比如idle观察者,定时器观察者,I/O观察者等等,事件循环每次循环称为Tic ...

  5. 比较setImmediate(func),setTimeout(func),process.nextTick(func)

    node中的事件优先级机制: console.log('第一笔!'); process.nextTick(function() { console.log('吃个饭吧!'); setImmediata ...

  6. setTimeout和setImmediate以及process.nextTick的区别

    在javascript中我们了解到了setTimeout和setInterVal函数事件队列(任务队列)的相关知识,除了setTimeout和setInterval这两个方法外,Node.js还提供了 ...

  7. vue之nextTick全面解析

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

  8. 聊聊VUE中的nextTick

    在谈nextTick之前,先要说明一件事,可能在我们平时使用vue时并没有关注到,事实上,vue执行的DOM更新是异步的. 举个栗子: <template> <div class=& ...

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

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

  10. vue2.0 正确理解Vue.nextTick()的用途

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...

随机推荐

  1. 从接口自动化测试框架设计到开发(二)操作json文件、重构json工具类

    用例模板里的请求数据多,看起来很乱,所以可以通过访问另外一个文件的方式获取请求数据 把请求数据都放在一个json文件中 取出login的内容: import json fp = open('G:/un ...

  2. NODEJS 使用 sqlite3 本地文件数据库

    npm install sqlite3 var sqlite3 = require('sqlite3').verbose();var db = new sqlite3.Database('WebFil ...

  3. ABS与PC材质

    PC材料和ABS材料都是最常用的塑料材质,它们在材质.价格.性能上都有不同点. (一)PC材料 优点:PC是一种综合性能优良的非晶型热塑性树脂,具有优异的电绝缘性.延伸性.尺寸稳定性及耐化学腐蚀性,较 ...

  4. 第60届IMO 第5题

    题目   巴斯银行发行的硬币在一面上铸有H,在另一面上铸有T,哈利有枚这样的硬币并将这些硬币从左至 右排成一行,他反复地进行如下操作:如果恰有k(>0)枚硬币H面朝上,则他将从左至右的第k枚硬币 ...

  5. javascript 权威指南一

    1. JavaScript是面向web(网页)的编程语言. 2.html: 描述网页内容,css:描述网页样式,JavaScript:描述网页行为 3.JavaScript非常适合面向对象和函数式的编 ...

  6. Cloudera Manager和CDH版本的对应关系

    来源:https://www.cloudera.com/documentation/enterprise/release-notes/topics/rn_consolidated_pcm.html#c ...

  7. List<SelectListItem> 转为 SelectList

    List<SelectListItem> 转为/转换 SelectList SelectList slPayCh = new SelectList(GetPayChannels(),&qu ...

  8. C++->以读或写方式打开一个文件

    以读或写方式打开一个文件 #include<iostream.h>   //.h以C|非C标准引用库文件 #include<fstream.h> #include<std ...

  9. 关于docker容器访问的主机的端口问题

    docker容器需要访问主机的,不能使用127.0.0.1,127.0.0.1访问的是docker容器不是主机: docker容器创建时会分配一个主机ip,可在主机使用命令 docker inspec ...

  10. Yarn报错:Could not find any valid local directory for nmPrivate/

    原因: yarn.nodemanager.local-dirs和hadoop的hadoop.tmp.dir参数对应文件位置不一致 解决办法: 将hdfs-site.xml中hadoop.tmp.dir ...