关于vue.js:vue中在浏览器重新刷新页面吸顶效果失效

问题：第一次加载我的项目的时候是能够失常显示吸顶成果的，然而从新刷新页面的时候就没有了

 created() {    this.getDestruction()      this.watchScroll()      window.addEventListener("scroll", this.watchScroll);  },  async mounted() {    await this.getMarket();    // console.log('this.turnover',this.burn)    this.drawLine();    // 事件监听滚动条  },   destroyed() {    // 移除事件监听    window.removeEventListener("scroll", this.watchScroll);    window.removeEventListener("scroll", this.handleClick);  },  methods: {    watchScroll() {      // 滚动的间隔      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;      // 容器的高度      var offsetTop = document.querySelector("#headtitle_bg").offsetHeight;      //  滚动的间隔如果大于了元素到顶部的间隔时，实现吸顶成果      if (scrollTop > offsetTop) {        this.navBarFixed = true;      } else {        this.navBarFixed = false;      }    },  }

吸顶之前

吸顶成果隐没

起因：获取不到#headtitle_bg节点
解决办法：应用nextTick()办法，是将回调函数提早在下一次dom更新数据后调用，简略的了解是：当数据更新了，在dom中渲染后，主动执行该函数，Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作。

批改后的代码

created() {    // console.log(this.$refs.To_Repurchase_VNC)    // this.getMarket()    this.getDestruction()    this.$nextTick(() => {      this.watchScroll()      window.addEventListener("scroll", this.watchScroll);    })  },  async mounted() {    // console.log(this.$refs.To_Repurchase_VNC)    await this.getMarket();    // console.log('this.turnover',this.burn)    this.drawLine();    // 事件监听滚动条  },   destroyed() {    // 移除事件监听    window.removeEventListener("scroll", this.watchScroll);    window.removeEventListener("scroll", this.handleClick);  },  methods: {    watchScroll() {      // 滚动的间隔      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;      // 容器的高度      var offsetTop = document.querySelector("#headtitle_bg").offsetHeight;      //  滚动的间隔如果大于了元素到顶部的间隔时，实现吸顶成果      if (scrollTop > offsetTop) {        this.navBarFixed = true;      } else {        this.navBarFixed = false;      }    },}