贵州企业网站,程序员自己做网站,河南五建建设集团有限公司网站,wordpress延迟加载js之前的文章我们对 vue 的基础用法已经有了很直观的认识#xff0c;本章我们来看一下 vue 中的生命周期函数。 上图为 Vue官方为我们提供的完整的生命周期函数的流程图#xff0c;下面的案例我们只是走了部分情况流程#xff0c;但所有的生命周期函数都涉及到了。 1 !DOC… 之前的文章我们对 vue 的基础用法已经有了很直观的认识本章我们来看一下 vue 中的生命周期函数。 上图为 Vue官方为我们提供的完整的生命周期函数的流程图下面的案例我们只是走了部分情况流程但所有的生命周期函数都涉及到了。 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 titlevue/title6 script srchttps://cdn.jsdelivr.net/npm/vue/script7 /head8 body9 div idapp
10 child v-ifshow/child
11 button clickhandleClick{{title}}/button
12 /div
13 script
14 Vue.component(child, {
15 beforeDestroy() {
16 console.log(beforeDestroy, this.$el);
17 },
18 destroyed() {
19 console.log(destroyed, this.$el);
20 },
21 template: p我是 child 子组件/p,
22 });
23 var app new Vue({
24 el: #app,
25 data: {
26 title: hello world,
27 show: true
28 },
29 beforeCreate() {
30 console.log(beforeCreate, this.$el);
31 },
32 created() {
33 console.log(created, this.$el);
34 },
35 beforeMount() {
36 console.log(beforeMounted, this.$el);
37 },
38 mounted() {
39 console.log(mounted, this.$el);
40 },
41 beforeUpdate() {
42 console.log(beforeUpdate, this.$el);
43 },
44 updated() {
45 console.log(updated, this.$el);
46 },
47 methods: {
48 handleClick() {
49 this.show !this.show;
50 }
51 }
52 })
53 /script
54 /body
55 /html 从上面的代码中我们可以看出 vue 的生命周期函数有 beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed 这几个生命周期函数的意思分别是 beforeCreate组件创建前 created组件创建完成 beforeMount组件挂载前 mounted组件挂载完成 beforeUpdate组件更新前 updated组件更新完成 beforeDestroy组件销毁前 destroyed组件成功销毁。 我们通过页面显示和控制台的输出日志来看一下 当页面加载时会触发 beforeCreatecreatedbeforeMountmounted 四个生命周期函数。当执行到 mounted 生命周期函数时数据才真正挂在到 DOM 上所以我们从后台获取到的数据可以放在 mounted 生命周期函数中然后再挂在到 DOM 上。 当我们更改数据时会触发哪些生命周期函数呢结果如下 当我们改变数据中的 title 值时触发了 beforeUpdate 和 updated 生命周期函数。 为了演示 beforeDestroy 和 destroyed 生命周期函数我们定义了一个子组件并通过 handleClick() 方法来控制该子组件的挂载和销毁当我们点击按钮使组件销毁时 因为我们将 beforeUpdate 和 updated 生命周期函数定义在了父组件上所以当子组件销毁时也属于父组件更新的一种所以会触发这两个函数。还触发了 beforeDestroy 和 destroyed 生命周期函数这两个是在组件销毁时才触发的生命周期函数。 转载于:https://www.cnblogs.com/weijiutao/p/10684448.html
