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>
来源:https://www.cnblogs.com/jianjie/p/12508422.html