379 vue的异步 DOM 更新：nextTick

1、Vue 中采用了 异步DOM更新 的机制

2、如何更新页面

  • 数据发生改变后, vue 没有立即将数据的改变更新到视图中, 而是等到数据不再变化的时候 一次性的 将 数据的改变更新到视图中

     // 1. 验证了
 for (let i = 0; i < 1000; i++) {
     this.count++
 }

3、为什么是异步 DOM 更新

  • 性能的考虑
  • 因为对于前端来说, 修改数据进行 DOM 操作是常有的事情, 如果频繁操作 DOM, 会严重影响页面的加载性能
  • DOM 操作这是前端的性能的瓶颈
  • 比如 : for (let i = 1; i < 10000; i++>) ，如果同步， 就要重新渲染 1000 次

4、验证 异步 DOM 更新

// 2. 直接获取data 中的值, 会立马获取成功
console.log(this.count)
this.count++
console.log(this.count)

// 但是 通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的
console.log(document.querySelector('h1').innerText) // 0
this.count = 100
console.log(document.querySelector('h1').innerText) // 0

5、需求 : 在数据更新后,立即获取到更新后的内容

DOM 更新后,会执行 this.$nextTick() 的回调函数,所以能拿到值

// setTimeout(() => {
//      console.log(document.querySelector('h1').innerText)
//   }, 1000)
this.$nextTick(() => {
  console.log(document.querySelector('h1').innerText) // 100
})
01-DOM异步更新.html
<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 
       DOM更新是异步的 
       - 性能的考虑
       - 证明 
       - $nextTick：解决异步DOM更新获取数据的问题 【$nextTick 是 实例对象的方法。】
     -->

    <div id="app">
        <h1>{{ num }}</h1>
        <button @click="fn">按钮</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                num: 100
            },
            methods: {
                fn() {
                    // 没问题的 【同步】
                    // console.log(this.num)
                    // this.num += 1
                    // console.log(this.num)

                    // 操作DOM ,获取DOM里的内容数据
                    console.log(document.querySelector('h1').innerText) // 100
                    this.num += 1 // +1 【数据变化，去更新DOM时，是异步的】
                    console.log(document.querySelector('h1').innerText) // 100

                    // 问题来了?
                    // 解决办法1 : 等你3秒 【不推荐】
                    // setTimeout(() => {
                    //   console.log(document.querySelector('h1').innerText) // 100
                    // }, 1000)

                    // 解决办法2 : 希望数据改变了, 视图更新完毕后, 通知我, 我再去获取h1里的值
                    // 更新视图完毕后, 自动会触发这个回调
                    // 面试 : 数据 、DOM(视图 更新)
                    this.$nextTick(() => {
                        console.log(document.querySelector('h1').innerText)
                    })

                    // console.log(1)
                    // 异步给我们的感觉有点延迟
                    // setTimeout(() => {
                    //   console.log('hha ')
                    // }, 0)
                    // console.log(2)
                }
            }
        })
    </script>
</body>

</html>
02-数据变化更新问题.html
<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 
        数据发生变化 ,不是一改变就立马更新的, 而是当数据不再发生变化的时候,一次性统一更新的
      -->
    <div id="app">
        <h1>{{ num }}</h1>
        <button @click="fn">按钮</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                fn() {
                    for (var i = 1; i <= 100; i++) {
                        this.num++
                    }
                }
            }
        })
    </script>
</body>

</html>

posted on 2020-03-17 08:12  冲啊！  阅读(634)  评论(0)  编辑  收藏  举报

导航