vue 关于生命周期、$nextTick、网络请求、DOM渲染之间的存在的问题(分享)

问题一

<div id="app" ref="app">
  <span>{{count}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      count: 1
    },
    created() {
      // 这里可以很明显的看到是有的
      this.$nextTick(() => {
        console.dir(this.$refs.app); // div#app
      })
    },
  })
</script>

<div id="app" ref="app">
  <span>{{count}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      count: 1
    },
    created() {
      // 这里 DOM 其实早就渲染好了，只是 Vue 在之后的生命周期中又对页面的 DOM 进行了更改
      // 也就是经过 Vue 渲染的 DOM 才能使用 this.$refs 的方法去获取
      
      // 因为 Vue 是数据驱动页面，而我们通过原生的方法在 created 中进行获取，
      // 很有可能在后面的生命周期又对 DOM 进行了更改，所以最好不要这样去做
      console.dir(document.querySelector("#app")); // div#app
      console.dir(this.$refs.app); // undefined
    },
  })
</script>

问题二

mounted() {
  fetch("xxx")
    .then(res => {
      console.log("data");
    })
  this.$nextTick(() => {
    console.log(1111);
  })
},
// 1111
// "data"
// 先执行的 111，在执行的网络请求
// 因为数据是在请求之后进行的修改，DOM 也是数据更改之后才会更新的，所以那就拿不到最新的 DOM 了
// 这里想要拿到最新的 DOM，要在 updated 中去获取