有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

nexttick的使用(如何在 Vue 中使用 nextTick())

vue 炮渣日记 4周前 (11-12) 23次浏览 已收录 0个评论 扫描二维码

vue 中组件的(props 或 state)发生变化时不会立刻在 DOM 中响应,Vue 是异步更新 DOM的。所以有时当你修改了组件状态后,立刻获取对应dom对象,会发现获取不到。这个时候,就要用到Vue.nextTick()。

让我们详细的看看nextTick()函数是如何工作的。

1.Vue.nextTick()

更改 Vue 组件数据时,DOM 会异步更新。Vue 会从所有组件中收集对虚拟 DOM 的多次更新,然后尝试创建一个批处理来更新 DOM。

例如,让我们看下一个切换元素显示的组件:

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      console.log(this.show, this.$refs.content);
    },
  },
};
</script>

单击 显示/隐藏 按钮更改 this.show 值,然后使用指令 v-if=”show” 切换 <div id=”content”>元素的显示。

在 handleClick 函数中,分别在控制台打印了this.show 和 this.$refs.content(包含该<div>元素的引用) 的元素对象,此时会发现他们的结果不一致。当 this.show 值为 true 时, 结果 this.$refs.contentis 值却是 undefined,这意味着 DOM 与组件的数据不同步。

如果你想捕捉 DOM 刚刚更新的那一刻,那么你需要使用一个特殊的函数 Vue.nextTick(callback)。

在DOM响应数据的变化后,会立刻执行 callback 回调函数。

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      Vue.nextTick(() => {
        console.log(this.show, this.$refs.content);
      });
    },
  },
};
</script>

这时,点击 显示/隐藏 按钮更改 this.show 值时,您会看到 this.$refs.content 与 this.show 值完全对应。

2. this.$nextTick()

Vue 允许在组件实例上使用 this.$nextTick(callback)。

在下面的示例 handleClick() 方法中更改 this.show 值,并使用 this.$nextTick() 捕捉DOM的更新:

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
      this.$nextTick(() => {
        console.log(this.show, this.$refs.content);
      });
    },
  },
};
</script>

如果要访问当前组件实例的更新使用 this.$nextTick() 更方便。

3. 带有async/await的 nextTick()

如果在没有参数的情况下调用 Vue.nextTick() 或 this.$nextTick(),则函数返回一个 promise。

使用 async/await 语法更具可读性的。

例如,让我们通过使用以下 async/await 语法捕获 DOM 更新:

<template>
  <div>
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show" ref="content">hello world!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    async handleClick() {
      this.show = !this.show;
      await this.$nextTick();
      console.log(this.show, this.$refs.content);
    },
  },
};
</script>

async handleClick() 已被标记为异步函数。

点击 显示/隐藏 按钮时,this.show 值会发生变化。

await this.$nextTick() 等待DOM的更改,在控制台打印 console.log(this.$refs.content) 引用的元素对象。

建议使用 async/await 语法,因为它比回调方法更具可读性。

4.总结

  1. 当您更改组件的数据时,Vue 会异步更新 DOM。
  2. 如果你想在组件的数据发生变化后立刻捕捉到 DOM 的更新,那么你需要使用 Vue.nextTick(callback) 或 this.$nextTick(callback) 函数。
  3. 他们的 callback 参数将在 DOM 更新后立即调用,并且保证您获得与组件数据同步的最新 DOM。
  4. 如果您不为 Vue.nextTick() 或 this.$nextTick() 提供回调参数,那么将返回一个promise,该promise 将在 DOM 更新时被解析执行。
  5. 将其与 async/await 语法一起使用将比回调方法更具可读性。
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址