Vue学习Day04-Vue中DOM更新是异步的 | Vue中DOM更新是异步的

以下是学习笔记:

　　Vue中DOM更新是异步的,现在暂时还未有体会到这个的用处,并且this.$nextTick()也不是很理解,暂且先记下.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 @click="updateCount" id="title">{{ count }}</h1> //这里指的是这个DOM--h1节点
  </div>
  <script src="./vue.js"></script>
  <script>
    // Vue中的DOM更新是异步的

    const vm = new Vue({
      el: '#app',
      data: {
        count: 1
      },

      methods: {
        // updateCount() { }
        updateCount: function () {
          for (var i = 0; i < 1000; i++) {
            this.count += 1 ////如果DOM更新是同步的,那么在这里,h1节点会更新1000次,这样做显然是浪费性能的
          }
          console.log(this.count) //结果是1001
          console.log('当前H1中的内容:', document.getElementById('title').innerText)//结果是1
          var that = this

          // 这个方法用来获取DOM更新后的内容
          this.$nextTick(function () {
            console.log('更新后: ', that.count)//1001
            console.log('更新后 H1中的内容:', document.getElementById('title').innerText)//1001

结果是1

1 }) } } }) </script> </body> </html>