$nextTick的使用场景
时间:2021-07-16
本文章向大家介绍$nextTick的使用场景,主要包括$nextTick的使用场景使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
可能只凭一些概念性的讲解还是无法对nextTick机制有很清晰的了解,还是上个示例来了解一下吧。
<template> <div class="app"> <div ref="contentDiv">{{content}}</div> <div>在nextTick执行前获取内容:{{content1}}</div> <div>在nextTick执行之后获取内容:{{content2}}</div> <div>在nextTick执行前获取内容:{{content3}}</div> </div> </template> <script> export default { name:'App', data: { content: 'Before NextTick', content1: '', content2: '', content3: '' }, methods: { changeContent () { this.content = 'After NextTick' // 在此处更新content的数据 this.content1 = this.$refs.contentDiv.innerHTML //获取DOM中的数据 this.$nextTick(() => { // 在nextTick的回调中获取DOM中的数据 this.content2 = this.$refs.contentDiv.innerHTML }) this.content3 = this.$refs.contentDiv.innerHTML } }, mount () { this.changeContent() } } </script>
当我们打开页面后我们可以发现结果为:
After NextTick 在nextTick执行前获取内容:Before NextTick 在nextTick执行之后获取内容:After NextTick 在nextTick执行前获取内容:Before NextTick
所以我们可以知道,虽然content1
和content3
获得内容的语句是写在content
数据改变语句之后的,但他们属于同一个事件循环中,所以content1
和content3
获取的还是 'Before NextTick' ,而content2
获得内容的语句写在nextTick
的回调中,在DOM更新之后再执行,所以获取的是更新后的 'After NextTick'。
原文地址:https://www.cnblogs.com/jxnc/p/15018953.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 什么是 “并查集” ?
- Sentinel + SpringBoot 基于本地文件模式实现规则持久化
- 1.5 Arduino的第一个程序
- 2.1 Arduino语言和结构
- TKE 实践亲和性与反亲和性
- 从HotSpot虚拟机源码了解Java的访问控制修饰符
- 设计模式(4)[JS版]-JavaScript如何实现建造者模式?
- 前端基础:HTML
- SignalR 2.x入门(一):SignalR简单例子
- 设计模式(5)[JS版]-JavaScript如何实现工厂方法模式?
- 前端基础:CSS
- 实现一个分布式调用链路追踪Java探针你可能会遇到的问题
- 设计模式(6)[JS版]-JavaScript如何实现抽象工厂模式?
- 前端基础:JavaScript
- 设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现???