关于程序员:学习笔记快3下大了就输是什么原因

背景

✅加一 Q 一带一你✅10812591✅邀一情一玛✅95889990✅进【09191m 典 c o m】✅以下疏忽
vue 是异步渲染的，当 data 扭转之后，DOM 不会立即被渲染，页面渲染时会将 data 的批改做整合，屡次 data 批改只会做整合最初一次性渲染进去，这也是异步渲染的起因。只有异步渲染才能够实现整合操作。

例子

methods: {update() {for (let i = 0; i < 10; i++) {this.testNum = this.testNum + i;}
    },
}, 

在你的 Vue 视图中，testNum 会发生变化。不过须要留神的是这个变动的过程，尽管咱们把 firstNum 循环批改了 10 次，然而实际上它只会把最初一次的值更新到视图上——这也是十分正当的，比如说咱们这个 demo 里，每一次循环给 testNum 的赋值只不过是一个过程，最终的目标是拿到 10 次循环的计算结果而已。如果咱们硬去算 10 次，那么不必要的性能开销必然是令人肉疼的。

需要

咱们须要对 data 批改后并拿到 DOM，对 DOM 进行操作解决，

例子

<template>
  <div id="app">
    <ul ref="ul1">
      <li v-for="(v, i) in list" :key="i">{{v}}</li>
    </ul>
    <button @click="add">add DOM</button>
  </div>
</template>
<script> export default {
  name: "app",
  data() {
    return {list: ["a", "b", "c"],
    };
  },
  methods: {add() {this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      const ulElem = this.$refs.ul1;
      console.log(ulElem.childNodes.length);
    },
  },
}; </script> 

原本点击完之后数组长度应该输入 6 个，然而实际上数组长度只有 3 个，因为 data 扭转后，DOM 并不会立即扭转，此时咱们是拿不到新增的节点的，这时候的 DOM 节点还是一开始的 a,b,c。DOM 操作执行完之后，它再异步渲染。

不过咱们的冀望是点击完之后立即拿到前面的三个，这时候就须要请出咱们的配角 nextTick。

 add() {this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      const ulElem = this.$refs.ul1;
      this.$nextTick(() => {console.log(ulElem.childNodes.length);
      });
    }, 

这个例子也能够看出，$nextTick 会待 DOM 渲染实现再回调 ，同时也能够看出，咱们尽管一次点击有三次批改 data, 然而屡次批改会进行整合，最初渲染一次，这也阐明渲染也是异步的，如果是同步，就没方法整合。