Vue生命周期之mounted

Vue生命周期之mounted教程

Vue 生命周期 的 mounted 函数被调用时，Vue 实例的内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。

Vue 生命周期的 mounted 函数是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经完全被创建好了，此时，如果没有其他操作的话，这个实例，就静静的在内存中。

案例

Vue生命周期之mounted案例

<!DOCTYPE html>
<html>
<head>
    <title>Vue生命周期之mounted</title>
    <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
    <div id="app">
        <h3 id="h3">{{msg}}</h3>
        <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el : '#app',
        data:{
            msg: "嗨客网"
        },
        mounted(){ 
            console.log(document.getElementById("h3").innerText);
        }
    });
</script>
</html>

浏览器运行，页面显示如下图所示：

05 vue mounted.png

我们在 Vue生命周期函数的 mounted 中，打印了 Vue 实例的 innerText 属性，此时 innerText 属性已经被渲染完毕，即，此时 Vue 实例的模板已经完全被渲染。

Vue生命周期之mounted总结

Vue 生命周期的 mounted 函数被调用时，Vue 实例的内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。