Vue.js系列（五）：Vue的生命周期！

最新推荐文章于 2022-09-17 19:23:11 发布

陈永佳

最新推荐文章于 2022-09-17 19:23:11 发布

阅读量744

点赞数 5

分类专栏： Vue系列 VsCode系列文章标签： Vue的生命周期

本文链接：https://blog.csdn.net/Mrs_chens/article/details/101052748

版权

VsCode系列同时被 2 个专栏收录

24 篇文章 5 订阅

订阅专栏

Vue系列

14 篇文章 3 订阅

订阅专栏

Vue.js系列（五）：Vue的生命周期！

前言

注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue

今天博主将为大家分享Vue.js系列（五）：Vue的生命周期！不喜勿喷，如有异议欢迎讨论！

有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！

目标

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

学习Vue对象创建过程中每个时期vue实例对象的状态
在不同的生命周期中vue对象内部各个属性
学习vue对象内部的各个事件初始化顺序
学习各个状态的钩子函数

1.1.1 Vue生命周期图示

每个 Vue应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({
    // 选项
})

每个 Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM并在数据变化时更新 DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

1.1.2 beforeCreate

vue实例对象或组件实例被创建,Vue对象数据观测 data数据对象和 event事件, watcher对象开始初始化但尚未初始化完成时.

此时,vue实例内的对象均是undefined不可访问.

var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello world!"
				},
				beforeCreate: function() {

					console.log(this.$el); // undefined

					console.log(this.$data); // undefined

					console.log(this.msg); // undefined

					//可以在这加个开始loading,设置加载时的提示信息等
					//获取屏幕尺寸,设备信息,运行环境等信息
				}
			});

1.1.3 created

在实例创建完成后被立即调用。在这一步，数据观测 data event watcher 均已被创建。

var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello world!"
				},
				created: function() {

					console.log(this.$el); // undefined

					console.log(this.$data); // object

					console.log(this.msg); // hello world!
					//ajax获取数据,将获取到的数据赋值给 data或data中的对象
				}
			});

1.1.4 beforeMount

将vue实例挂在到dom对象之前.

vm.$el对象已创建,但未挂载到页面上.

此时获取到的dom对象中的指令尚未被计算.

var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello world!"
				},
				beforeMount: function() {

					console.log(this.$el); //  virtual dom 

					console.log(this.$data); // object

					console.log(this.msg); // hello world!
					//此时还无法通过document.getElementById等函数获取dom对象.
				}
			});

1.1.5 mounted

在原dom对象被vue创建的vm.$el替换到页面上之后.此时页面上才会存在相对于的dom节点.

一般理解为dom对象创建完毕.

// jQuery
			$(document).ready(function() {
				//ready
			});

			// vue
			var vm = new Vue({
				el: "#app",
				mounted: function() {
					//ready
					console.log(this.$el); // javascript dom 
					console.log(this.$data); // object
					console.log(this.msg); // hello world!   
					//在这里可以配合一些 页面加载完毕后的 处理.
					//例如: iSlider.js,fancybox.js 等插件初始化.
				}
			})

1.1.6 beforeUpdate

当数据发生变化时,组件更新之前

调用时机 数据更新时调用，vm.$el替换到页面上之前.

// vue
				var vm = new Vue({
					el: "#app",
					data: {
						msg: "hello vue."
					},
					beforeUpdate: function() {
						//当 data 中的属性,发生变化时,
						//将现有的变化更新到 html 页面上之前触发此事件
					}
				})

1.1.7 updated

组件更新之后

调用时机 新的数据更新到dom节点上之后.

// vue
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello vue."
				},
				updated: function() {
					//当data发生变化并且变化后的内容已经响应到html页面上之后,触发该事件.
					// updated 不保证所有的内容全部响应完毕之后才触发.
				}
			})

1.1.8 beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

// vue
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello vue."
				},
				beforeDestroy: function() {
					//实例销毁之前调用。在这一步，实例仍然完全可用。
				}
			})
			vm.$destroy();

1.1.9 destroyed

Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

// vue
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello vue."
				},
				destroyed: function() {
					console.log("vue 组件已经被销毁.");
				}
			})
			vm.$destroy();

总结

在本次学习中:

学习Vue创建对象时各生命周期内vue实例内对象的状态
学习常用的vue生命周期回调函数beforeCreate,created,mounted等

勇于尝试（做练习）：

创建一个html页面,在vue实例创建时显示加载中.实例创建后使用ajax从服务器获取数据绑定到data对象,并关闭加载中.

答案如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>数据状态及函数</title>
</head>
<body>
    
<div id="app">
     <h3>Watch对象</h3>
     <p>
         请输入搜索关键词:
         <input v-model="key">
     </p>
     <p v-text="result"></p>
 </div>

<script src="引入你的Vue.js"></script>
<script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                key: '',
                result: '请先输入查询条件...',
                i: 0
            },
            watch: {
                key: function (newKey, oldKey) {
                    this.result = '请稍后,正在查询中...';
                    this.search();
                }
            },
            methods: {
                search: function () {
                    console.log(this.i++);
                    var vm = this;
                    setTimeout(function () {
                        vm.result = "第:" + vm.i + "次搜索完毕.";
                    }, 500);
                }
            }
        });
    </script>
</body>
</html>

Vue.js系列（五）：Vue的生命周期！分享完毕了！各位小伙伴快去试试吧！

最后

更多参考精彩博文请看这里：《陈永佳的博客》
喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

陈永佳

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js系列（五）：Vue的生命周期！

Vue.js系列（五）：Vue的生命周期！前言今天博主将为大家分享Vue.js系列（五）：Vue的生命周期！不喜勿喷，如有异议欢迎讨论！有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！目标每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在...
复制链接

扫一扫