vue项目中$nextclick的应用场景以及体会

在项目中我们经常需要在vue声明周期的creat阶段对DOM进行操作，但是这时候页面的数据还未渲染。因此需要把DOM操作放到Vue.newxClick()之中。

使用场景
1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

2、数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

案例一、
getDetail方法是create时候执行的。

create(){
	this.getDtail();
}

getDetail() {
  let pam = {
    p_id: this.p_id,
  };
  let that = this
  this.reqM2Service(
    "shoot_task/back/dispute_appeal_detail/",
    pam,
    "get"
  ).then((response) => {
    this.listObj = response.data.data;
    response.data.data.replies.forEach((item) => {
      // 判断是不是推客任务
      if (item.msg_types == "1") {
        this.srcList.push(item.msg);
      }
    });
    /**
   * 查看授权账号
   * ut_id  用户任务id
   */
    that.$nextTick(function(){
      console.log(this.listObj.ut_id);
      let pam = {
        upt_id: this.listObj.ut_id,
      };
      this.reqM2Service("shoot_task/get_upt_auth/", pam, "get").then((res) => {
        if (res.data.code == 0) {
          this.tweeter = res.data.data;
        }
      });
    })
  });
},

需要等待到this.listObj的数据全部获取到，再通过$nextClick去执行下面的操作。这样才才能自动获取到create时候的数据

案例二

页面刷新时进行表单校验，校验函数在create中调用，如果不使用$nextCilck()调用清除校验，在页面刷新时就会触发校验。因为dom更新是异步操作，在页面加载进来做清空表单和清空校验的操作都需要放进$nextCilck()