<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
 
    <script src="../node_modules/vue/dist/vue.js"></script> 
    <script> 
        /*
         *  生命周期函数
         *  beforeCreate 创建 vue 实例之前
         *  created 创建实例成功(一般在这里实现数据的异步请求)
         *  beforeMount 渲染DOM之前 (加载组件第一次渲染)
         *  mouted 渲染DOM 完成 (加载组件第一次渲染) 
         *  beforeUpdate 重新渲染之前 (数据更新等操作控制重新渲染)
         *  updated 重新渲染完成 
         *  beforeDestroy 销毁之前
         *  destroyed 销毁完成
         */ 
        let vm = new Vue({
            el: "#app", 
            beforeMount(){
                console.log(document.getElementById('app'))
            },
            mounted(){
                console.log(document.getElementById('app'))
            },
            data: { 
               msg:'你好'
            }  
        });
 
        // vm.$destroy();
        // console.log(vm)
    </script>
 
</body>
</html>