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

将回调延迟到下次 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. linux - 查看是否安装 JDK

    看看 是否设置了jdk环境变量: echo $JAVA_HOME: 或运行命令: java -verion 看看能否查看版本 ,能就是运行: 或者查看后台进程:ps -ef|grep java.

  2. 【daily】日常所遇 - 页面A嵌套页面B

    因为懒,所以直接在http://www.runoob.com写demo测试了. (1)iframe嵌套 虽然可能到现在这中方式都很常用,但是你baidu/google一下会发现.很多人都并不提倡用if ...

  3. 编程中的幂等性 —— HTTP幂等性

    幂等(idempotent.idempotence)是一个数学与计算机学概念,常见于抽象代数中. 在编程中.一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同.幂等函数,或幂等方法, ...

  4. Linux环境搭建及基础操作

    一.Linux环境搭建 1.安装虚拟机软件(VMWare,Parallel) 虚拟机的作用:将本来不是适合当前操作系统的分区虚拟化成适合当前操作系统的分区格式 2.新建虚拟机: 类似买了一台新的电脑, ...

  5. yii2 response响应配置

    response参数配置 方式一.全局配置 用于接口开发 适用:只有所有请求都是application/json类型时可用. $config = [ 'components' => [ 'res ...

  6. gulp常用插件之gulp-cache使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-cache这是一款基于临时文件的gulp缓存代理任务. 更多使用文档请点击访问gulp-cache工具官网. 安装 一键安装不多解释 n ...

  7. Matrix Sum HihoCoder - 1336 二维树状数组 感觉好像二维差分。

    #include<cstdio> #include<cstring> using namespace std; typedef long long ll; ; ; ll c[N ...

  8. Bell数

    事实上,\[e^{(e^t-1)x}=\sum_{k=0}^{\infty}\frac{B_k(x)}{k!}.\]\[B_n(x)=x\sum_{k=1}^{n}\binom{n-1}{k-1}B_ ...

  9. vConsole 让你在手机上也能轻松调试网页

    有时候为了想在手机真机上对网页进行 Debug,可手机上没有 F12,用 Chrome DevTools 连接手机操作又太过复杂.VConsole 的出现,正好解决了这一痛点! (下列内容照搬一下官方 ...

  10. 软件工程概论,java web项目

    需要网站系统开发需要掌握的技术: 实施Java的WEB项目需要掌握的技术如:面向对象分析设计思想,设计模式和框架结构,XML语言,网页脚本语言,数据库,应用服务器,集成开发环境Java语言是完全面向对 ...