前言
通过上一章的学习, 我们已经初步的了解了 vue 到底是什么东西, 可以干什么, 而这一篇博客主要介绍 vue 的生命周期和它常用的钩子函数, 如果有学过 java 的园友可能有接触到在学习 servlet 的时候学过 servlet 的生命周期 servlet 加载 ---> 实例化 ---> 服务 ---> 销毁, 对于 vue 的而言他也有自己的生命周期, 那么一起来看看吧!
本章目标
学会并了解 vue 的生命周期和钩子函数
vue 的生命周期和钩子函数
其实在提到 vue 的生命周期和钩子函数的时候, 有的人认为常用的钩子函数有 10 个, 也有的人认为是 8 个, 无论是 10 个还是 8 个对于我而言都是一样的, 我们主要讲解 8 个 vue 的钩子函数. 首先来一波官网的对于 vue 生命周期的图解
这一张图对于 vue 的生命周期已经讲解的特别详细了, 但是光靠这一张图还不足于了解它的生命周期, 我们需要实践一下, 有句古话说的好, 实践是检验道理的唯一标准, 介绍一下 vue 的钩子函数.
beforeCreate(实例创建前)
实例组件刚开始创建, 元素 dom 和数据都还没有初始化
应用场景: 可以在这加个 loading 事件
created(实例创建后)
数据 data 已经初始化完成, 方法也已经可以调用, 但是 dom 为渲染, 在这个周期里面如果进行请求是可以改变数据并渲染, 由于 dom 未挂载, 请求过多或者占用时间过长会导致页面线上空白
应用场景: 在这结束 loading, 还做一些初始化, 实现函数自执行
beforeMoute(元素挂载前)
dom 未完成挂载, 数据初始化完成, 但是数据的双向绑定还是 {{}}, 这是因为 vue 采用了虚拟 dom 技术
mouted(元素挂载后)
数据和 dom 都完成挂载, 在上一个周期占位的数据把值渲染进去, 一般请求会放在这个地方, 因为这边请求改变数据之后刚好能渲染
beforeUpdate(实例更新前)
只要是页面数据改变了都会触发, 数据更新之前, 页面数据还是原来的数据, 当你请求赋值一个数据的时候就会执行这个周期, 如果没有数据改变不执行
updated(实例更新后)
只要是页面数据改变了都会触发, 数据更新完毕, 页面的数据是更新完成的, beforeUpdated 和 updated 要谨慎使用, 因为页面更新数据的时候都会触发, 在这里操作数据很影响性能和死循环
beforeDestory(实例销毁前)
实例销毁之前调用, 在这一步, 实例仍然完全可用
destory(实例销毁后)
Vue 实例销毁后调用, 调用后, Vue 实例指示的所有内容都会解除绑定, 所有的事件监听器都会被移除, 所有的子实例也会被销毁
实例一
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- vue 的生命周期实例一
- </title>
- </head>
- <body>
- <div id="app">
- <input type="text" v-model="msg" />
- {{msg}}
- </div>
- <button onclick="destory()">
- 销毁
- </button>
- <script src="../js/vue.min.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- const vm = new Vue({
- el: '#app',
- data: {
- msg: 'vue'
- },
- beforeCreate() {
- console.log('vue 实例创建前:' + this.msg + ',' + this.$el);
- // 数据 data 和 dom 都还没有初始化
- },
- created() {
- console.log('vue 实例创建后:' + this.msg + ',' + this.$el);
- // 数据 dom 初始化完成, dom 还没有初始化完成
- },
- beforeMount() {
- console.log('元素挂载前:');
- console.log(this.$el);
- },
- mounted() {
- console.log('元素挂载后:');
- console.log(this.$el);
- },
- beforeUpdate() {
- console.log('实例更新前');
- console.log(this.msg);
- console.log(this.$el);
- },
- updated() {
- console.log('实例更新后');
- console.log(this.msg);
- console.log(this.$el);
- },
- beforeDestroy() {
- console.log('实例销毁前');
- console.log(this.msg);
- },
- destroyed() {
- console.log('实例销毁后');
- console.log(this.msg);
- }
- });
- function destory() {
- vm.$destroy();
- }
- </script>
- </body>
- </HTML>
结果
实例二
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- vue 的生命周期实例二
- </title>
- </head>
- <body>
- <div id="app">
- {{name}}
- </div>
- <button onclick="destory()">
- 销毁实例
- </button>
- <script src="../js/vue.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- const vm = new Vue({
- el: '#app',
- data: {
- name: '一只流浪的 kk',
- age: 18
- },
- beforeCreate() {
- console.log('============ 实例创建前 =============');
- console.log(this.$el); //undefined
- console.log(this.$data); //undefined
- },
- created() {
- console.log('============ 实例创建后 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- },
- beforeMount() {
- console.log('============ 元素挂载前 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- },
- mounted() {
- console.log('============ 元素挂载后 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- },
- beforeUpdate() {
- console.log('============ 实例更新前 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- },
- updated() {
- console.log('============ 实例更新后 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- },
- beforeDestroy() {
- console.log('============ 实例销毁前 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- },
- destroyed() {
- console.log('============ 实例销毁后 =============');
- console.log(this.$el);
- console.log(JSON.stringify(this.$data));
- }
- });
- function destory() {
- vm.$destroy();
- }
- </script>
- </body>
- </HTML>
总结
beforeCreate(): 此时 $el,data 的值都为 undefined, 即 el 和 data 并未初始化 .
create(): 此时可以拿到 data 的值, 但是 $el 依旧为 undefined, 即 data 完成了 数据的初始化, el 没有.
beforeMounte(): $el 的值为 "虚拟" 的元素节点, dom 未完成挂载, 数据初始化完成, 但是数据的双向绑定还是 {{}}, 这是因为 vue 采用了虚拟 dom 技术.
mouted(): 数据和 dom 都完成挂载, 在上一个周期占位的数据把值渲染进去, 一般请求会放在这个地方, 因为这边请求改变数据之后刚好能渲染.
来源: https://www.cnblogs.com/jjgw/p/12111517.html