关于 Vue 里面nextTick()的理解，证明，和用法的简单阐述
执行时间
是一个异步函数，再DOM树完成之后执行。
语法
vue.nextTick( function(){
// do sth
}) // 在外部调用
this.nextTick( () =>{
// do sth
}) // 在内部调用
代码证明
<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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.center {text-align: center}
</style>
</head>
<body>
<div id = 'app'>
<div> </div>
<div> </div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
needed_change: "sth"
},
methods:{
/*
定义两个函数，分别是
change_nextTick() 使用nextTick()
change() 没有使用 nextTick()
*/
change_nextTick(){
this.$nextTick( () => {
console.log("value_nextTick", this.needed_change)
})
},
change(){
console.log("value",this.needed_change)
}
},
created(){
this.change();
this.change_nextTick()
// dom 为完成渲染两个函数几乎同时执行
},
mounted(){
//一般在mounted完成之后dom已经完成渲染了，选择mounted测测试
this.needed_change = "sth_after_mounted"
console.log("dom rended")
}
})
</script>
</body>
</html>
执行结果
value sth // 先打印sth，dom为完成渲染
dom rended // 渲染完成，且needed_change值改变
value_nextTick sth_after_mounted // 打印改变后的sth
可以发现，我们在几乎相同的地方调用了两个方法，但是执行的顺序是不一样的，或者说可以证明nextTick()是在Dom完成渲染之后执行的。
案例
在不方便改变postcss的情况下
为了适配不同的移动端设备，为不同的页面设置rem对应的px。
created(){
console.log("created")
this.$nextTick( () =>{
this.font_size = `${document.documentElement.clientWidth / 23.44 + 'px'}`
console.log("font",`${document.documentElement.style.fontSize = this.font_size}`)
})
}
