nextTick的测试题-您可以来试一试一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

这篇文章是我从其他平台搬运来的（是我原创的）。

背景

nextTick是vue面试中高频考点。有这么几个问题：

nextTick的作用
nextTick的工作原理
nextTick和Promise的关系
this.数据项=新值 背后做了什么？
Tick这个单词是什么意思？如何理解？

简单测试

下面有一个份初始代码，你可以复制到本地，直接打开运行。

<!DOCTYPE html>
<html lang="en">
<head>  
    <meta charset="UTF-8">  
</head>
<body>  
<div id="app">      
    <div id="div">{{a}}</div>      
    <button @click="btn">btn</button>
</div>  
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>  
<script>    
var vm = new Vue({
    el:"#app",
    data:{ a :1 },
    methods: {
        btn() {
            this.a = 2
            const div = document.getElementById('div')
            this.$nextTick(() => {
                console.log('nextTick', div.innerHTML)
            })          
            console.log(div.innerHTML)
        }
    } 
})
</script>
</body>
</html>