一, 概念
vue 生命周期, 又叫生命周期钩子函数, 是组件从创建到销毁的过程.
二, 主要的八大生命周期
1. 首先, 为方便观察每个周期的特点, 我们模拟一个 "one" 组件的创建与销毁, 并在八个生命周期中分别打印挂载点, 属性, 方法以及真实的 DOM 结构, 通过输出结果进行分析.
- <div id="myApp">
- <input type="button" value="创建与销毁" @click="isShow= !isShow">
- <one v-if="isShow"></one>
- </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 方法, 数据便不会动态改变;
beforeMount() 挂载前: 数据和模板还未进行结合, 访问不到真实的 DOM 结构, 可以对数据做最后的的修改;
mounted() 挂载后: 数据和模板已经结合, 可以通过 this.$refs 访问到真实的 DOM 结构;
beforeUpdate() 更新前: 当 data 中的数据发生改变时会执行, 可以访问到真实 DOM 结构, 对数据做最后的修改, 当前生命周期函数中的数据和模板还没更新完成;
updated() 更新后: 数据更新后形成最新的 DOM 结构, 当前是一个频繁触发的函数, 因此要做一些时间绑定或实例化时, 需要做一个提前判断;
beforeDestroy() 销毁前: 可以继续访问到真实 DOM 结构以及 data 中的数据, 通常在这个生命周期函数中做一些事件绑定 / 移除的操作;
destroyted() 销毁后: 断开 DOM 与数据之间的关联, 访问不到真实的 DOM 结构;
3. 注意:
多次执行的生命周期函数: beforeUpdate(),updated()
组件第一次创建时会执行: beforeCreate(),created(),beforeMount(),mounted()
来源: https://www.cnblogs.com/pinkpinkc/p/10751250.html