对vue中nextTick()的理解及使用场景说明
异步更新队列:
首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的。
即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新队列)。
视图需要等队列中所有数据变化完成之后,再统一进行更新。示例:
<div id="App">
<input type="button" value="改变文本" @click="change">
<p ref="myP">{{str}}</p>
</div>
<script>
new Vue({
el:"#App",
data:{
str:"我之前很瘦的。"
},
methods:{
change(){
this.str = "现在超胖了!";
// 输出结果:我之前很瘦的。
console.log(this.$refs.myP.innerText)
}
}
})
</script>
通过以上示例的输出结果可以有力证明:Vue 实现的响应式并不是数据发生变化之后视图立即变化。
获取更新之后的DOM
Vue官方为了避免开发者直接接触视图,鼓励大家以"数据驱动"的方式进行思考。但,现在的我们想基于更新后的视图来搞点事情,该如何下手?
我们可以使用$nextTick(callback)
。这里的回调函数(callback
)将在数据更新完成,视图更新完毕之后被调用。
更改上个示例中的change方法如下:
change () {
this.str = '隐形的翅膀!'
this.str = '钢铁的翅膀!!'
this.$nextTick(() => {
// 输出结果:钢铁的翅膀!!
console.log(this.$refs.myP.innerText)
})
}
从输出的结果可以看出:我们可以通过$nextTick()
获取到更新之后的DOM
。
因为 $nextTick()
返回一个 Promise
对象,所以我们也可以使用async/await语法完成相同的事情:
async change () {
this.str = '隐形的世邦'
this.str = '肖邦的翅膀'
await this.$nextTick()
console.log(this.$ref.myP.innerText)
}
或者
change(){
this.str = "隐形的翅膀";
this.$nextTick().then(()=>{
// 输出结果:腾格尔的翅膀
console.log(this.$refs.myP.innerText);
});
this.str = "腾格尔的翅膀"
}
应用场景
1、如果要在created()
钩子函数中进行的DOM
操作,由于created()
钩子函数中还未对DOM进行任何渲染,所以无法直接操作,需要通过$nextTick()
来完成。
created () {
this.$nextTick(()=>{
this.$refs.myP.innerText = "钢铁的翅膀"
})
}
注:在created()
钩子函数中进行的DOM
操作,不使用$nextTick()
会报错:
// Error in created hook: "TypeError: Cannot set property 'innerText' of undefined"
created(){
this.$refs.myP.innerText = "钢铁的翅膀"
}
对vue中nextTick()的理解及使用场景说明的更多相关文章
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- vue中nextTick的理解
A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更 ...
- vue中nextTick
vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...
- Vue中nextTick()解析
最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class=&quo ...
- vue中keepalive怎么理解?---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- 通俗易懂了解Vue中nextTick的内部实现原理
1. 前言 nextTick 是 Vue 中的一个核心功能,在 Vue 内部实现中也经常用到 nextTick.在介绍 nextTick 实现原理之前,我们有必要先了解一下这个东西到底是什么,为什么要 ...
- vue中的slot理解和使用
最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...
- vue 的nextTick的理解
适用场景: 例如:你在DOM渲染之前对DOM进行了操作的话,这时肯定不会有效果,好比你在 vue 的生命周期 created 里面操作了DOM元素这时肯定不会有效果, 如果我们在 created 里面 ...
随机推荐
- 关于java中构造方法、实例初始化、静态初始化执行顺序
在Java笔试中,构造方法.实例初始化.静态初始化执行顺序,是一个经常被考察的知识点. 像下面的这道题(刚刚刷题做到,虽然做对了,但是还是想整理一下) 运行下面的代码,输出的结果是... class ...
- POJ 3318:Matrix Multiplication(随机算法)
http://poj.org/problem?id=3318 题意:问A和B两个矩阵相乘能否等于C. 思路:题目明确说出(n^3)的算法不能过,但是通过各种常数优化还是能过的. 这里的随机算法指的是随 ...
- 有意思的 CDN
Clean Clean false 7.8 磅 0 2 false false false EN-US ZH-CN AR-SA /* Style Definitions */ table.MsoNor ...
- Modbus 指令
本节内容: 一.S7-1200 作为Modbus RTU 主站 二.S7-1200 作为Modbus RTU 从站 三.S7-1200 作为Modbus RTU 主站 S7-1200 作为Modbus ...
- spring的context:exclude-filter 与 context:include-filter
1 在主容器中(applicationContext.xml),将Controller的注解打消掉 <context:component-scan base-package="com& ...
- NetCore AutoMapper的封装
需要引用AutoMapper的Nuget包 如果需要忽略某个字段就在字段上面打标签如下: [IgnoreMap] public string IgnoreValue { get; set; } ...
- 第八章 Fisco Bcos 国密版本的部署、控制台搭建、合约的部署、sdk 调用
鉴于笔者以前各大博客教程都有很多人提问,早期建立一个技术交流群,里面技术体系可能比较杂,想了解相关区块链开发,技术提问,请加QQ群:538327407 参考资料 证书说明:https://mp.wei ...
- AWS S3 上传文件
一.获取签名的URL 通过后端给的接口拿到已经签名好的文件上传的URL地址 二.读取文件(注:AWS 接受的二进制,不能使用form-data) // 获取文件二进制 getFileMd5 = (ke ...
- py+selenium 自动判断页面是否报错并显示在自动化测试报告【原创】
有需求就会去研究解决的路子. 现在需求就是,测试报告报错信息一堆,但却无法肉眼看出是什么问题,你只能知道定位不到元素或是超时,但你却不知道其实进入页面就报错了或是提交表单就报错了!也就是看到报错,需要 ...
- Spring Bean 的装配方式
Spring Bean 的装配方式 装配 Bean 的三种方式 一个程序中,许多功能模块都是由多个为了实现相同业务而相互协作的组件构成的.而代码之间的相互联系又势必会带来耦合.耦合是个具有两面性的概念 ...