重要的API

一、nextTick()

1、写法 Vue.$nextTick()或者this.$nextTick()

原因：
set操作代码是同步的，但是代码背后的行为是异步的。set操作修改声明式变量，触发re-render生成新的虚拟DOM，进一步执行diff运算，找到脏节点集合，交给Vue背后的更新队列去执行循环更新。

什么是nextTick？
在更新队列中每一个更新任务都是一个更新单元，nextTick表示下一个更新单元（更新周期）。

例子1：
代码是同步的，任务是异步的，打印出来肯定不是3

<html>
<head><title>重要的API</title><style></style>
</head>
<body><div id="app"><h1 v-text="num" id="bb"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},methods: {add() {this.num++this.num++// 获取节点文本const tt = document.getElementById('bb').innerTextconsole.log("---tt", tt)}}})app.$mount('#app')</script></body>
</html>

页面显示3：

但是控制台打印1：

例子2：
用nextTick修改成同步的

<html>
<head><title>重要的API</title><style></style>
</head>
<body><div id="app"><h1 v-text="num" id="bb"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},methods: {add() {this.num++this.num++// 获取节点文本this.$nextTick(()=>{const tt = document.getElementById('bb').innerTextconsole.log("---tt", tt)})}}})app.$mount('#app')</script></body>
</html>