前端基础之《Vue（13）—重要API》
重要的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>
2、nextTick的作用
当我们set操作data（更新DOM），你希望访问这个DOM的最新状态，使用nextTick。（操作完DOM后，马上对它做操作）
3、面试题
this.num++或者this改变声明式变量是同步还是异步的？
代码是同步，但是背后有虚拟DOM生成，有递归运算，有更新队列是异步的。
4、nextTick()在某种程度（场景）下，可以使用updated()来替代
二、forceUpdate()
1、写法 this.$forceUpdate()
原因：
Vue响应式是有缺陷的。在复杂的Vue应用中，有些复杂的引用数据类型，当你set操作这些复杂的引用数据类型时，视图不更新。
解决方案：
当你set操作完成后，立即调用this.$forceUpdate()强制更新。（强制re-render）
有时候，this.$forceUpdate()也无法解决上述问题，对set操作的变量进行一次深复制。