vue基础实践：生命周期钩子函数

el :'#app' 用来指定当前vm所关联的视图
el:'#app', 等价于template: '<h1>{{msg}}</h1>',//指定了template与 el:'#app'没有关系了html

生命周期函数（钩子函数）vue

beforeCreated 建立实例以前

created 建立实例成功，（通常在这里实现数据的异步请求）异步发送ajax请求，

beforeMount 渲染Dom以前，加载组件第一次渲染（把渲染的结果放到页面以前）
{{msg}}

Mount 渲染Dom完成,加载组件第一次渲染（把渲染的结果放到页面以后）
你好世界

beforUpdate 从新渲染以前（数据更新等操做控制DOM重现渲染）

Update 从新渲染完成

beforeDestroy 销毁以前

destroy 销毁以前

<!DOCTYPE html>
<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>
</head>
<body>
        <!-- 生命周期函数（钩子函数） beforeCreated 建立实例以前 created 建立实例成功 ，（通常在这里实现数据的异步请求）异步发送ajax请求， beforeMount 渲染Dom以前，加载组件第一次渲染（把渲染的结果放到页面以前） {{msg}} Mount 渲染Dom完成,加载组件第一次渲染（把渲染的结果放到页面以后） 你好世界 beforUpdate 从新渲染以前（数据更新等操做控制DOM重现渲染） Update 从新渲染完成 beforeDestroy 销毁以前 destroy 销毁以前 -->
    <!-- 渲染模板 -->
       <div id="app">
        
           {{msg}}
       </div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script> let vm = new Vue({ el:'#app', //template: '<h1>{{msg}}</h1>',//指定了template与 el:'#app'没有关系了 beforeMount(){ console.log(document.getElementById('app')); }, Mount(){ console.log(document.getElementById('app')); }, data:{ //=>destroy 销毁 msg : '你好世界' } }); //vm.$mount('#app'); //=>el :'#app' 用来指定当前vm所关联的视图 //销毁以后，再去修改msg响应式数据的值，视图也不会从新渲染了。一个vue的整个生命周期，是从new vue开始，从destroy结束，生命周期函数就是能让本身作一些事情。 // vm.$destroy(); // console.log(vm); </script>
</html>

运行结果以下：
node