nextTick使用

vue的nextTick

发现一个问题,在mounted里面先获取元素高度会变成0,nextTick里面会是500,showBar里面是0.之前对生命周期理解模糊,通过这次机会了解了一下.

  mounted(){
    console.log(document.getElementById("mychart").offsetHeight);//0
    this.$nextTick(()=>{
      console.log(document.getElementById("mychart").offsetHeight);//500

    })
    this.initializeTable();
    this.getAreas();
    this.showBar();

  }

    showBar(){


      let option = {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };

      console.log(document.getElementById("mychart").offsetHeight+";第三次"); //高度为0,因为没有渲染出来

        //console.log(document.getElementById("mychart").offsetHeight);//高度有了
        let myChart = this.$echarts.init(document.getElementById("mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });

    }

如果变成

    console.log(document.getElementById("mychart").offsetHeight);
    this.$nextTick(()=>{
      console.log(document.getElementById("mychart").offsetHeight);
      this.initializeTable();
      this.getAreas();
      this.showBar();
    })

就会变成

而如果是

  mounted(){

    console.log(document.getElementById("mychart").offsetHeight);
    this.initializeTable();
    this.getAreas();
    this.showBar();

  },

    showBar(){


      let option = {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };

      console.log(document.getElementById("mychart").offsetHeight+";第三次"); //高度为0,因为没有渲染出来
      this.$nextTick().then(res => {
        console.log(document.getElementById("mychart").offsetHeight);//高度有了
        let myChart = this.$echarts.init(document.getElementById("mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      })

    }

就会变成

发现

    initializeTable(){

      let containerHeight = this.$refs.container.offsetHeight;
      let upContentHeight = this.$refs.upContent.offsetHeight;
      this.tableStyle += ' height: '+(containerHeight-upContentHeight)+"px;";
    },

有更新属性的情况,更新属性之后,tableStyle的高度才有值,如果直接执行showBar,这时候tableStyle的高度还是0,所以showBar里获取元素高度也是0

vue生命周期

beforeCreate: 创建阶段,只是创建了实例,没有数据,没有DOM.
created: 创建阶段,实例有了,数据有了,DOM没有.
beforeMounted:挂载阶段,和 created 差不多
mounted:挂载阶段,DOM也有了,但不保证全部都渲染好了.根实例挂载了.要保证视图渲染完毕,可以使用this.$nextTick
beforeUpdate:更新阶段,数据更新之后,DOM更新之前,获取的DOM的数据还是之前的.
updated:更新阶段,少用.
beforeDestroy:销毁阶段,销毁之前执行,实例仍在.
destroy:销毁阶段,实例已经销毁

结论

如果有更新属性的,需要在更新属性之后再执行nextTick.