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

 

posted @ 2019-07-18 11:47  奋斗中的小人物  阅读(1911)  评论(0编辑  收藏  举报