VUE怎么使用nextTick解决DOM视图的问题

什么是$nextTick()?

在Vue生命周期的created()函数中，元素并未渲染到真实DOM上，因此任何关于DOM的操作都不会起作用，$nextTick能够等待VueJS完成一次DOM更新后再操作DOM，确保数据已注入视图

$nextTick()的使用场景

当需要在Vue数据发生改变后立即执行某个必须操作时，使用$nextTick()， 举例：在列表中计算列表项高度，当有新的项添加进来时，需要在列表项全部渲染完成后再次计算高度

$nextTick()代码示例

    // 局部组件，计算高度的方法
    const computedHeight = (list) => {
      return list.reduce((total, item) => {
        total += item.offsetHeight;
        return total;
      }, 0);
    };

    // 创建 Vue 实例
    new Vue({
      el: '#app',
      data() {
        return {
          list: [],
          height: 0
        };
      },
      methods: {
        addItem() {
          this.list = [...this.list, this.list.length + 1];
          // 待DOM更新后再计算高度
          this.$nextTick(() => {
            const list = document.querySelectorAll('.list-item');
            this.height = computedHeight(list);
          });
        }
      },
      mounted() {
        // 在 DOM 加载完成后，计算初始高度
        this.$nextTick(() => {
          const list = document.querySelectorAll('.list-item');
          this.height = computedHeight(list);
        });
      }
    });
  

使用$nextTick()的注意点

1. 当父组件与子组件通信时，当子组件获取更新后的 props 数据并重新渲染时，使用$nextTick()更新DOM现在是必须的，否则可能会出现渲染不完整的情况；
2. v-if / v-show等指令发生改变时也可能需要使用$nextTick()； 3.当在组件中使用this.$refs.xx访问子组件并修改它的属性时可能也需要使用$nextTick()。因为组件还未更新完，this.$refs.xx可能找不到所对应的DOM，需要等待组件渲染完毕后才能进行访问。

$nextTick()的总结

$nextTick()是VueJS的一个生命周期钩子函数，用来解决DOM更新之后需要执行某些操作的问题，确保VueJS更新DOM后再执行某些DOM操作，保证了代码的正确性和高效性。