Vue的生命周期

Posted 2021-01-15 wdbgqq

一 Vue的生命周期

二 生命周期的钩子

 1 <div id="app">
 2     {{name}}
 3 </div>
 4 <script>
 5     const app=new Vue({
 6         el:‘#app‘,
 7         data:{
 8             name:‘大哥‘,
 9         },
10         methods:{
11             init:function () {
12                 console.log(123)
13             }
14         },
15         beforeCreate(){
16             console.group(‘beforeCreate‘);
17             console.log(this.$el);
18             console.log(this.name);
19             console.log(this.init);
20         },
21         created(){
22             console.group(‘created‘);
23             console.log(this.$el);
24             console.log(this.name);
25             console.log(this.init);
26         },
27         beforeMount(){
28             console.group("beforeMount");
29             console.log(this.$el);
30             console.log(this.name);
31             console.log(this.init);
32         },
33          mounted(){
34             console.group("mounted");
35             console.log(this.$el);
36             console.log(this.name);
37             console.log(this.init);
38         },
39         beforeUpdate(){
40             console.group("beforeUpdate");
41             console.log(this.$el);
42             console.log(this.name);
43             console.log(this.init);
44         },
45         updated(){
46             console.group("updated");
47             console.log(this.$el);
48             console.log(this.name);
49             console.log(this.init);
50         },
51         beforeDestroy(){
52             console.group("beforeDestroy");
53             console.log(this.$el);
54             console.log(this.name);
55             console.log(this.init);
56         },
57         destroyed(){
58             console.group("Destroy");
59             console.log(this.$el);
60             console.log(this.name);
61             console.log(this.init);
62         }
63     })
64 </script>

生命周期的钩子-代码

　　 1.beforecreated ：el 和 data 并未初始化

　　　created：完成了data数据的初始化

　　 2.beforeMount：完成了el 和 data的初始化

　　   mounted：完成了挂载

　　3.update相关

　　　　在浏览器里执行app.name=‘xxx‘          触发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

　　

　　　4.destory相关　　　

　　　　在浏览器console里执行命令：

　　　　　　app.$destroy();

　　　　　　触发了destroy相关的钩子函数，也就是说组件被销毁~

　　　　　　更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~