$nextTick使用场景和原理

最新推荐文章于 2024-07-15 08:00:00 发布

粥粥_

最新推荐文章于 2024-07-15 08:00:00 发布

阅读量2.3k

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/weixin_44735916/article/details/115547892

版权

Vue的DOM更新是异步的，$nextTick用于在数据变化后等待DOM更新。适用场景包括获取更新后的DOM、created钩子中的DOM操作和获取元素尺寸。它不保证子组件已挂载，可以用$nextTick替换mounted。$nextTick涉及事件循环，确保所有数据变化完成后更新视图。

摘要由CSDN通过智能技术生成

为什么使用nextTick
由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。为了确保得到更新后的DOM，所以设置了nextTick()方法。

使用场景
1.获取数据更新之后的DOM
2.created()中进行DOM操作
3.获取元素宽度

<template>
  <section>
    <div ref="hello">
      <h1>{
   {
    name }}</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template

最低0.47元/天解锁文章

粥粥_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
$nextTick使用场景和原理

为什么使用nextTick由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。为了确保得到更新后的DOM，所以设置了nextTick()方法。使用场景1.获取数据更新之后的DOM2.created()中进行DOM操作3.获取元素宽度<template> <section> <div ref="hello"> <h
复制链接

扫一扫

专栏目录