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