你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

Vue 在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环
中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM 操作。然后，
在下一个事件循环tick 中， Vue 刷新队列井执行实际（己去重的）工作。所以如果你用一个for 循
环来动态改变数据100•次，其实它只会应用最后一次改变，如果没有这种机制， DOM 就要重绘100
次，这固然是一个很大的开销。
Vue 会根据当前浏览器环境优先使用原生的Promise 血en 和MutationObserver ，如果都不支持，
就会采用setTimeout 代替。

理论上，我们应该不用去主动操作DOM ，因为Vue 的核心思想就是数据驱动DOM ，但在很
多业务里，我们避免不了会使用一些第三方库，比如popper等，这些基于原生JavaScript 的库都有创建和更新及销毁的完整生命周
期，与Vue 配合使用时，就要利用好$nextTick 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <%--<link rel="stylesheet" href="/static/common/css/iview.css">--%>
    <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
    <script src="/static/common/js/vue.js"></script>
    <script type="text/javascript" src="/static/common/js/iview.min.js"></script>

</head>
<body>
<div id="app">

    <div id="div" v-if="show">
        <div>name</div>
    </div>
    <button @click="show1">
        toggle
    </button>

</div>
<script>
    new Vue({
        el: '#app',
        data:{
          show:false,
        },
        methods:{
            show1:function(){
                this.show=true;
                this.$nextTick(function(){
                    var div = document.getElementById("div").innerHTML;
                    console.info(div)
                })

            }
        }
    })
</script>
</body>
</html>