nextTick的使用

为了数据变化之后等待vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM

<div id="app">
<h3>{{msg}}</h3>
</div> <script>
let app = new Vue({
el:'#app',
data:{
msg:'晓强'
},
})
app.msg = '新的数据-晓强'
// console.log(app.$el.textContent)
// 为了数据变化之后等待vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick()
// 在当前的回调函数中能获取最新的DOM
Vue.nextTick(()=>{
console.log(app.$el.textContent)
})
</script>

nextTick的应用

看下面的代码

<div id="app">
<App></App>
</div>
<script>
/*
* 需求:
* 在页面拉取一个接口,这个接口返回一些数据,这些数据是这个页面的一个浮层组件要依赖的,
* 然后我在接口,一返回数据就展示了这个浮层组件,
* 展示的同时上报一些数据给后台(这些数据是父组件从接口拿的)
* 这个时候,神奇的事件发生了,虽然我拿到了数据了,但是浮层展现的时候,
* 这些数据还未更新到组件上去,上报失败
* */
const Pop = {
data() {
return {
isShow: false
}
},
props:{
name:{
type: String,
default:''
}
},
template: `
<div v-if="isShow">
{{name}}
</div>
`,
methods: {
show() {
this.isShow=true;
console.log(this.name)
}
}, };
const App = {
data() {
return {
name: ''
}
},
created() {
// 模拟异步请求
setTimeout(()=>{
this.name='晓强';
this.$refs.pop.show(); },1000)
},
components: {
Pop
},
template: `<pop ref='pop' :name="name"></pop>` }; let app = new Vue({
el: '#app',
components: {
App
}, })
</script> 看下图一秒钟之后 页面显示 但是console.log没有内容

修改如下:

this.$nextTick(()=>{
this.$refs.pop.show();
})

vue学习(八)nextTick[异步更新队列]的使用和应用的更多相关文章

  1. vue 学习八 自定义指令

    vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { conso ...

  2. vue学习(八) vue中样式 class 定义引用

    //style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:ita ...

  3. Vue 父组件ajax异步更新数据,子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  4. Vue你不得不知道的异步更新机制和nextTick原理

    前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色.大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行.而 nextTick 作为异 ...

  5. Vue异步更新机制以及$nextTick原理

    相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能你还 ...

  6. Vue 源码解读(4)—— 异步更新

    前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...

  7. VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

    一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...

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

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

  9. 简单理解Vue中的nextTick

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

随机推荐

  1. CentOS7 安装PHP7的swoole扩展:

    一.绪 Swoole简介 PHP异步网络通信引擎 最终编译为so文件作为PHP的扩展 准备工作 Linux环境 PHP7 swoole2.1 redis 源码安装PHP7 源码安装swoole htt ...

  2. java并发队列

    阻塞队列 常见的阻塞队列有ArrayBlockingQueue,LinkedBlockingDeque,LinkedBlockingQueue,这些队列有界且可以阻塞线程 ArrayBlockingQ ...

  3. java Vector的特点与使用

    Vector Vector的数据结构 基于数组,大小可变(数组扩容). Vector与ArrayList的比较 我看了下源码,最大区别就是Vector的方法加了synchronized,是线程安全的 ...

  4. 1-m*n循环填数(用标记数组)blibli2018秋招第三题一个类型

    #include <iostream> #include<string> #include<algorithm> using namespace std; ; in ...

  5. 生成MyEclipse6.5&7.5&8.5 注册机源码

    分类: java技术2010-09-30 21:46 26638人阅读 评论(6) 收藏 举报 myeclipsejavastringimportinputbyte 生成MyEclipse8.5注册码 ...

  6. Python学习笔记之基础篇(三)python 数据类型 int str bool 详谈

     python 的数据类型: 1.int:存放 1,2,3 等数据 ,用于数字的运算 2.bool :True, False 用于判断 3.str:字符串,用来存储少量的数据 4.list : 数组的 ...

  7. STM32学习笔记:创建工程模板

    STM32作为一类高级单片机,在应用中不容小觑. 所以本人从2018年1月1日开始对于STM32系列单片机的学习. 本人所持的型号为:STM32F429ZI-DISCOVERY,M4内核,封装类型为: ...

  8. MAC 终端编辑完成后如何保存:

    如果是vi,则:Esc 退出编辑模式,输入以下命令: :wq 保存后退出vi,若为 :wq! 则为强制储存后退出(常用):w 保存但不退出(常用):w! 若文件属性为『只读』时,强制写入该档案:q 离 ...

  9. Verilog 2001 `default_nettype none

    在Verilog 1995規定,對於沒宣告的信號會自動視為wire,這樣常常造成debug的困難,Verilog 2001另外定義了`default_nettype none,將不再自動產生wire. ...

  10. mysql8 my.ini

    [mysqld] ; 设置3306端口 port= ; 设置mysql的安装目录 basedir=D:/wamp64/bin/mysql/mysql8.0.11 ; 设置mysql数据库的数据的存放目 ...