<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！' } }, //生命周期函数：在一个组件的生命周期的某一时刻会自动执行的函数 //1在组件生成之前自动执行 beforeCreate(){ console.log('beforeCreate'); }, //2在组件生成之后自动执行 created(){ console.log('created'); }, //3在组件内容渲染到页面之前调用自动执行 beforeMount(){ // console.log(document.getElementById("app").innerHTML); console.log('beforeMount'); }, //4在组件内容渲染到页面之后调用自动执行 mounted(){ // console.log(document.getElementById("app").innerHTML); console.log('mounted'); }, //5 当数据发生变化但页面未更新时调用自动执行 beforeUpdate(){ // console.log(document.getElementById("app").innerHTML); console.log('beforeUpdate'); }, //6 当数据发生变化且页面已更新时调用自动执行 updated(){ // console.log(document.getElementById("app").innerHTML); console.log('updated'); }, //7 当Vue实例失效且dom未销毁时调用自动执行 beforeUnmount(){ // console.log(document.getElementById("app").innerHTML); console.log('beforeUnmount'); }, //8 当Vue实例失效时且dom已销毁时调用自动执行 unmounted(){ // console.log(document.getElementById("app").innerHTML); console.log('unmounted'); }, //8 全局的错误捕获 errorCaptured(err,instance,info){ console.log(err,instance,info); return false; }, template:'<h1>{{msg}}</h1>' }); app.mount('#app'); setTimeout(()=>{ app.unmount('#app'); },6000) </script> </body> </html>