vue中$nextClick的理解

vue中$nextClick的个人理解

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

使用场景

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

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

    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;
            }
          });
        })
      });
    },

类似上上述代码所示。

因为getDetail方法是create时候执行的。

需要等待到this.listObj的数据全部获取到，再通过$nextClick去执行下面的操作。

这样才才能自动获取到create时候的数据