VueDOM更新笔记_vue 手动更改 style width ,如如何判断dom更新是否完成-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43818430/article/details/110086290

本文通过一个示例详细解析了Vue中DOM更新的异步操作特性，指出在数据变化后，Vue会等待下一帧再进行DOM更新以提高效率。在数据变更后，使用`$nextTick`或`updated`钩子函数才能获取到更新后的DOM状态。这有助于开发者理解和掌握Vue的响应式原理及最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM更新

vue的DOM更新是一个异步操作：可以提高编译效率，避免性能浪费。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>{{name}}</h1>
    <ul>
      <li v-for="i in arr">{{i}}</li>
    </ul>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: '测试',
        arr:[1,2,3,4]
      },
      mounted(){
        console.log(document.querySelectorAll('li')); // 四个
        this.arr.pop(); // 删除数组的最后一项
        console.log(document.querySelectorAll('li')); // 获取到的DOM元素还是四个，但是页面上显示的是只有三个了

        this.arr.pop();
        console.log(document.querySelectorAll('li')); // 还是四个

        // vue的DOM更新是一个异步操作：可以提高编译效率，避免性能浪费
        // 获取最终的DOM：$nextTick() 获取在 updated 钩子函数中获取
        this.$nextTick(()=>{ // 使用箭头函数是为了保证函数中的this指向的是当前实例
          // 对应的这个函数会在DOM更新完成之后触发
          console.log(document.querySelectorAll('li'));  // 和页面上显示的一样，只有两个
        })
      },
      updated(){
        // 这里获取到的是视图更新完之后的内容
        console.log(document.querySelectorAll('li'));  // 和页面上显示的一样，只有两个
      }
    });
  </script>
</body>

</html>