vue的$nextTick使用后的js代码执行顺序问题
一、问题产生背景:
父组件已经获得子组件实例,并能直接触发子组件的方法,在父组件中调用了子组件的两个方法
// 父组件调用子组件,this.picker是获取的子组件整个实例,先调用update,再调用setSlotValue
this.picker.update();
const pro = {
first_char: "A",
parent_id: "1",
region_id: "3",
region_name: "安徽",
sort_order: "255",
type: "1"
}
this.picker.setSlotValue(0, pro);
// 子组件的update、setSlotValue方法以及update中调用的translate2Value方法 // update方法
update() {
console.log(1);
this.$nextTick(() => {
this.translate2Value();
});
}, // translate2Value方法
translate2Value () {
console.log(3)
} // setSlotValue方法
setSlotValue(slotIndex, soltVal) {
console.log(2);
for (let [index, slot] of this.slots[slotIndex].values.entries()) {
if (this.isObjectValueEqual(soltVal, slot)) {
// 这里改变了页面dom元素样式
this.ul_slots[slotIndex].style.WebkitTransform = "translate3d(0px," + -(index * this.itemHeight) + "px,0px)";
return;
}
}
}
// 因为nextTick是等待页面dom变化时渲染完毕时才执行的,所以执行结果为:
1 2 3 // update方法去掉this.$nextTick,执行结果为:
1 3 2
vue的$nextTick使用后的js代码执行顺序问题的更多相关文章
- [js]js代码执行顺序/全局&私有变量/作用域链/闭包
js代码执行顺序/全局&私有变量/作用域链 <script> /* 浏览器提供全局作用域(js执行环境)(栈内存) --> 1,预解释(仅带var的可以): 声明+定义 1. ...
- js代码执行顺序问题
前 言 LiuDaP 今天就给大家介绍一个特别基础的东西,javascript中函数的一点儿小知识(js代码的执行顺序),希望对大家有那么一点点帮助吧!!! 一.js--->单线程 严格意 ...
- JS代码执行顺序
JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的.而且在分析执行同一段代码中,定义式的函数语句会被提取出来优先执行.函数定义执行完后,才会按顺序执行其他代码. 先看看 ...
- 关于js代码执行顺序
上网查了一下关于这个方面的资料,大部分都是关于两个script标签中的js代码和变量以及函数提升方面的知识. 1.两个script标签 <script> alert("我是代码块 ...
- xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义
xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义 XSS攻击的防范 XSS攻击造成的危害之所以会发生,是因为用户的输入变成了可执 ...
- js 异步执行顺序
参考文章: js 异步执行顺序 1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...
- 浅析js的执行顺序
javascript是一种描述型的脚本语言,是一种解析语言,由浏览器动态解析,不同种类的浏览器不同版本的浏览器对于js的解析有着微小的差别,不同浏览器的js解析引擎效率也有高低,下面来给大家分析一下j ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- 详解JavaScript的任务、微任务、队列以及代码执行顺序
摘要: 理解JS的执行顺序. 作者:前端小智 原文:详解JavaScript的任务.微任务.队列以及代码执行顺序 思考下面 JavaScript 代码: console.log("scrip ...
随机推荐
- 在Excel多个工作表间快速切换的绝招
在Excel多个工作表间快速切换的绝招 几乎每个Excel用户"数据分析师"都应该知道,如果一个Excel工作簿中包括许多个工作表,我们"数据分析师"可以通过单 ...
- 第三方框架MBProgressHUD-----实现各种提示框
程序运行显示如下 : 点击按钮实现对应的提示框: 这里只截取了其中一张图,有兴趣的可以自己运行程序,查看其他的几种提示框哟!!! 第三方框架MBProgressHUD的下载地址:https://git ...
- Windows VS2017 编译 libssh2 1.7.0(执行命令、文件上传、下载)
下载安装 OpenSSL 要编译 libssh2,必须先编译好 OpenSSL 的静态库,直接从 http://slproweb.com/products/Win32OpenSSL.html 下载已经 ...
- Python爬取链家二手房源信息
爬取链家网站二手房房源信息,第一次做,仅供参考,要用scrapy. import scrapy,pypinyin,requests import bs4 from ..items import L ...
- linux环境上 rocketmq 安装部署
Rocketmq-简单部署 一.准备环境 1.系统:Centos7.3(无硬性要求) 2. jdk:1.8 3.maven:3.5(无硬性要求) 4.git 5.rocketmq 4.2 二.环境 ...
- Linux系统目录的学习
1.在公司中linux 都是没有界面 2.系统路径 2.1 /表示根目录 2.2 ~表示/root 2.3etc:存放系统配置文件 2.4 home 除了root 以外所有用 ...
- 第一周006------Java 三大版本含义——Java ME和安卓开发的关系
Java ME 和安卓开发没有任何关系 Java SE(Java Standard Edition):标准版,定位在个人计算机的应用(桌面系统 QQ 游戏)Java EE(Java Enterp ...
- java源码--Map
Map接口 用于保存具有映射关系的数据结构,实现该接口的类可以通过键来获取对应的值.. 可以将给定一个键值对存储在Map接口的实现类实例中,如:map.put("key", &qu ...
- Java基础---Java循环区别
三种循环的区别. 1. 如果条件判断从来没有满足过,那么for循环和while循环将会执行0次,但是do-while循环会执行至少一次.2. for循环的变量在小括号当中定义,只有循环内部才可以使用. ...
- PHP基础之函数
函数概念: 函数是用来完成某种特定任务的可重用代码块; 函数可以使程序更具模块化,拥有良好的结构; 函数定义后在程序中可以重复调用; 函数分为内置函数和自定义函数 考点: 变量的作用域和静态变量 延伸 ...