组件生命周期方法

admin

1. <div id="Application"></div>
   
2.     <script>
   
3.         const root = {
   
4.             beforeCreate () {
   
5.                 console.log("beforeCreate,组件即将创建前")
   
6.             },
   
7.             created () {
   
8.                 console.log("created,组件创建完成")
   
9.             },
   
10.             beforeMount () {
    
11.                 console.log("beforeMount,组件即将挂在前")
    
12.             },
    
13.             mounted () {
    
14.                 console.log("mounted,组件挂载完成")
    
15.             },
    
16.             beforeUpdate () {
    
17.                 console.log("beforeUpdate,组件即将更新前")
    
18.             },
    
19.             updated () {
    
20.                 console.log("updated,组件更新完成")
    
21.             },
    
22.             activated () {
    
23.                 console.log("activated,被缓存的组件激活时调用")
    
24.             },
    
25.             deactivated () {
    
26.                 console.log("deactivated,被缓存的组件停用时调用")
    
27.             },
    
28.             beforeUnmount () {
    
29.                 console.log("beforeUnmount,组件即将被卸载前调用")
    
30.             },
    
31.             unmounted () {
    
32.                 console.log("unmounted,组件被卸载后调用")
    
33.             },
    
34.             errorCaptured (error, instance, info) {
    
35.                 console.log("errorCaptured,捕获到来自子组件的异常时调用")
    
36.             },
    
37.             renderTracked (event) {
    
38.                 console.log("renderTracked,虚拟DOM重新渲染时调用")
    
39.             },
    
40.             renderTriggered (event) {
    
41.                 console.log("renderTriggered,虚拟DOM被触发渲染时调用")
    
42.             }
    
43.         }
    
44.         const app = Vue.createApp(root)
    
45.         app.mount("#Application")
    
46.     </script>

复制代码