一、问题产生背景:

  父组件已经获得子组件实例,并能直接触发子组件的方法,在父组件中调用了子组件的两个方法

// 父组件调用子组件,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代码执行顺序问题的更多相关文章

  1. [js]js代码执行顺序/全局&私有变量/作用域链/闭包

    js代码执行顺序/全局&私有变量/作用域链 <script> /* 浏览器提供全局作用域(js执行环境)(栈内存) --> 1,预解释(仅带var的可以): 声明+定义 1. ...

  2. js代码执行顺序问题

      前  言 LiuDaP 今天就给大家介绍一个特别基础的东西,javascript中函数的一点儿小知识(js代码的执行顺序),希望对大家有那么一点点帮助吧!!! 一.js--->单线程 严格意 ...

  3. JS代码执行顺序

    JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的.而且在分析执行同一段代码中,定义式的函数语句会被提取出来优先执行.函数定义执行完后,才会按顺序执行其他代码. 先看看 ...

  4. 关于js代码执行顺序

    上网查了一下关于这个方面的资料,大部分都是关于两个script标签中的js代码和变量以及函数提升方面的知识. 1.两个script标签 <script> alert("我是代码块 ...

  5. xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义

    xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义 XSS攻击的防范 XSS攻击造成的危害之所以会发生,是因为用户的输入变成了可执 ...

  6. js 异步执行顺序

    参考文章: js 异步执行顺序   1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...

  7. 浅析js的执行顺序

    javascript是一种描述型的脚本语言,是一种解析语言,由浏览器动态解析,不同种类的浏览器不同版本的浏览器对于js的解析有着微小的差别,不同浏览器的js解析引擎效率也有高低,下面来给大家分析一下j ...

  8. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

  9. 详解JavaScript的任务、微任务、队列以及代码执行顺序

    摘要: 理解JS的执行顺序. 作者:前端小智 原文:详解JavaScript的任务.微任务.队列以及代码执行顺序 思考下面 JavaScript 代码: console.log("scrip ...

随机推荐

  1. poi导出excel2007版本

    /** * 导出excel2007版本 * * @param titles * 表头集合 * @param sheetNames * sheet名称 * @param datas * 数据集合 * @ ...

  2. python基础之内置模块(二)

    configparser configparser用来对特定格式的文件进行解析处理,比如ha-proxy,rsync,samba配置文件等等均可.来个简单的文件先看下: [section1] #节点 ...

  3. idea中Lombok的Buider构造器模式,getter/setter正确使用方法

    public class ApiUser implements Serializable { private Long id; /*** * 用户类型:single,org(organization) ...

  4. (转)Flink简介

    1. Flink的引入 这几年大数据的飞速发展,出现了很多热门的开源社区,其中著名的有 Hadoop.Storm,以及后来的 Spark,他们都有着各自专注的应用场景.Spark 掀开了内存计算的先河 ...

  5. FCKEDITOR在.NET中的使用

    FCKEDITOR在.NET中的使用 FCKeditor介绍 FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务.它不需要安装任何 ...

  6. 动态绑定easyui datagrid列名

    根据实时数据在同一个DataGrid中显示不同字段,本身easyui并没有支持动态绑定列名,只有show属性显示或隐藏某字段.今天在网上看到直接修改easyui类库动态绑定列名的方法,废话不多说直接借 ...

  7. linux EXT4格式分区扩容

    1.查看现有的分区大小  2.关机增加磁盘大小为100G  3.查看磁盘扩容后状态 lsblk或dh -TH 4.进行分区扩展磁盘,保留根目录的起止位置.  5.删除根分区,不要保存  6.创建分区, ...

  8. Python netaddr CIDR转换

    功能 http://netaddr.readthedocs.io/en/latest/tutorial_03.html 将CIDR地址与IP范围相互转化 Convert CIDR to IP rang ...

  9. 【C/C++】缓冲区设计--环形队列

    原文链接:http://blog.csdn.net/billow_zhang/article/details/4420789 在程序的两个模块间进行通讯的时候,缓冲区成为一个经常使用的机制. 如上图, ...

  10. 【ARM-Linux开发】嵌入式操作系统上的小型数据库移植SQLite

    近段时间在学数据库,因为自身需求,所以注重研究了点嵌入式sqlite数据库,SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品 ...