vue生命周期详解

什么是生命周期？

• 从 vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期

• 生命周期钩子：就是生命周期事件的别名，生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期函数三大类

1、创建期间的生命周期函数

• beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

<template>
  <div id="app"></div>
</template>

<script>
export default {
  data() {
    return {
      msg: "clwy",
    };
  },
  methods: {
    showClwy() {
      console.log("执行showClwy方法");
    },
  },
  // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
  beforeCreate() {
    console.log(this.msg);
    this.showClwy();
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• created：实例已经在内存中创建完成，此时data 和 methods已经创建好，但是还没有开始编译模板

<template>
  <div id="app"></div>
</template>

<script>
export default {
  data() {
    return {
      msg: "clwy",
    };
  },
  methods: {
    showClwy() {
      console.log("执行showClwy方法");
    },
  },
  // 这是我们遇到的第二个生命周期函数，在created中，data 和 methods都已经被初始化好了
  // 如果要操作data中的数据或者调用 methods 中的方法，最早只能在created中操作
  created() {
    console.log(this.msg);
    this.showClwy();
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• beforeMount：此时已经完成了模板编译，但是还没有挂载到页面中

<template>
  <div>
    <p id="test">123131</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "clwy",
    };
  },
  methods: {
    showClwy() {
      console.log("执行showClwy方法");
    },
  },
  // 这是我们遇到的第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中
  // 通过获取上面的 DOM 节点的内容，我们发现无法获取到，因为模板虽然编译完成，但是真实的 html 并没有被渲染到页面中，所以找到对应节点
  beforeMount() {
    console.log(document.getElementById("test").innerText);
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

• mounted：此时已经将编译好的模板，挂载到了页面指定的容器中显示

<template>
  <div>
    <h3 id="test">{{ msg }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "clwy",
    };
  },
  methods: {
    showClwy() {
      console.log("执行showClwy方法");
    },
  },
  // 这是我们遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
  mounted() {
    console.log(document.getElementById("test").innerText);
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意：mounted是实例创建期间最后一个生命周期函数，当执行完 mounted 就表示实例已经被完全创建好了，如果没有其他操作的话，
这个实例会一直存在我们的内存中

2、运行期间的生命周期函数

• beforeUpdate：状态更新之前执行函数，此时 data 中的状态值是最新的，但是页面显示的数据还是旧的，因为此时还没有开始重新渲染 DOM 节点

<template>
  <div>
    <p id="test">{{ msg }}</p>

    <button type="button" @click="msg = 'hello clwy'">修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "clwy",
    };
  },
  methods: {
    showClwy() {
      console.log("执行showClwy方法");
    },
  },
  // 这是运行期间的第一个生命周期函数，表示页面还没有被更新，但是数据更新了
  beforeUpdate() {
    // console.log(document.getElementById("test").innerText);
    // 执行上述代码，我们发现上面的 DOM 节点内容并没有发生改变，且终端也没有报错，是因为数据没有变化
    // 接下来我们设置一个按钮，修改上面的 msg 数据，让其发生改变
    console.log("原数据内容是：" + document.getElementById("test").innerText);
    console.log("修改后的 data 中的 msg 内容是：" + this.msg);
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

当执行 beforeUpdate 的时候，页面中显示的数据还是旧的，此时 data 数据的最新的，但页面尚未和最新的数据保持同步

• updated：实例更新完毕之后调用此函数，此时 data 中的状态值和页面上显示的数据都已经完成了更新，页面已经被重新渲染好了

<template>
  <div>
    <p id="test">{{ msg }}</p>

    <button type="button" @click="msg = 'hello clwy'">修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "clwy",
    };
  },
  methods: {
    showClwy() {
      console.log("执行showClwy方法");
    },
  },
  // 这是运行期间的第二个生命周期函数，当updated事件执行的时候，页面和 data 的数据已经保持同步了，都是最新的
  updated() {
    console.log("原数据内容是：" + document.getElementById("test").innerText);
    console.log("修改后的 data 中的 msg 内容是：" + this.msg);
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27