0
点赞
收藏
分享

微信扫一扫

Vue高级特性「五」--$nextTick

女侠展昭 2021-09-30 阅读 43
web 前端
$nextTick

data改变之后,DOM不会立刻渲染,获取不到最新的DOM节点;
$nextTick会在DOM渲染之后被触发,以获取最新DOM节点

<template>
  <div>
    <ul ref="ul1">
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <button @click="add">添加项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["a", "b", "c"],
    };
  },
  methods: {
    add() {
      this.list.push(Date.now());
      this.list.push(Date.now());
      this.list.push(Date.now());

      const ulElem = this.$refs.ul1; //获取ul的DOM节点
      console.log(ulElem.childNodes.length); //此时data改变之后,DOM不会立刻渲染,获取不到最新的DOM节点

      // $nextTick会在DOM渲染之后被触发,以获取最新DOM节点
      this.$nextTick(() => {
        const ulElem = this.$refs.ul1; //获取ul的DOM节点
        console.log(ulElem.childNodes.length); //$nextTick会在DOM渲染之后被触发,此时已经是最新的DOM节点
      });

      // 1. 异步渲染,$nextTick 待DOM渲染完再回调
      // 2. 页面渲染是,会将data的修改做整合,多次data修改只会渲染一次
    },
  },
};
</script>
举报

相关推荐

0 条评论