"一、概念　　vue 生命周期，又叫生命周期钩子函数，是组件从创建到销毁的过程。二、主要的八大生命周期　　1. 首先，为方便观察每个周期的特点，我们模拟一个 'one' 组件的创建与销毁，并在八个生命周期中分别打印挂载点、属性、方法以及真实的 DOM 结构，通过输出结果进行分析。 1 2 3 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 44 浏览 • 5 个月前

【Vue】----- 浅谈vue的生命周期

一、概念

　　vue 生命周期，又叫生命周期钩子函数，是组件从创建到销毁的过程。

二、主要的八大生命周期

　　1. 首先，为方便观察每个周期的特点，我们模拟一个 "one" 组件的创建与销毁，并在八个生命周期中分别打印挂载点、属性、方法以及真实的 DOM 结构，通过输出结果进行分析。

1 <div id="myApp">
2     <input type="button" value="创建与销毁" @click="isShow= !isShow">
3     <one v-if="isShow"></one>
4 </div>

<script>
    new Vue({
        el:"#myApp",
        data:{
            isShow:true
        },
        components: {
            one:{
                template:`
                    <div>
                        <input type="text" v-model="userName">
                        <p ref="my">{{num}}</p>
                    </div>
                `,
                data(){
                    return {
                        userName:"生命周期",
                        num:0,
                    }
                },
                methods:{fn(){
                        console.log(this.userName);}
                },
                beforeCreate(){
                    console.group("创建之前 beforeCreate**************************");
                    console.log(this.$el); // 挂载点
                    console.log(this.userName); //属性
                    console.log(this.fn); //方法
                    console.log(this.$refs.my); //通过 this.$refs 可以访问真实的 DOM 结构
                    console.groupEnd();},
                created(){
                    console.group("创建之后 created*******************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();},
                beforeMount(){
                    console.group("挂载之前 beforeMount********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();},
                mounted(){
                    console.group("挂载之后 mounted********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();},
                beforeUpdate(){
                    console.group("更新视图数据之前 beforeUpdate********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();},
                updated(){
                    console.group("更新视图数据之后 updated********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();},
                beforeDestroy(){
                    clearInterval(this.timer);
                    console.group("vue 实例销毁之前 beforeDestroy********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();},
                destroyed(){
                    console.group("vue 实例销毁之后 destroyed********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();}
        }
    }
})

</script>

　　2. 八大生命周期的特点

beforeCreate() 创建前：当前生命周期函数主要用于初始化工作，此时可以创建一个 loading；

created() 创建后：可以访问到 vm 身上所有属性和方法；会将 data 和 methods 身上所有的属性和方法都挂载在 vm 的实例身上；会在 data 身上所有属性添加 getter/setter 方法，因此若要进行前后端数据交互时必须在当前生命周期中进行 "响应式原理"; 若数据未提前在 data 中进行绑定，那么这个属性身上不会有 getter/setter 方法，数据便不会动态改变；