2. Vue 入门实战学习教程之实例生命周期

Vue 入门实战学习教程之实例生命周期

  • 0x01 Vue 入门实战学习教程之实例生命周期
    • 1.1 写在前面的话
    • 1.2 Vue 实例生命周期
    • 1.3 Vue 实例生命周期示例
    • 1.4 确保元素添加到DOM上之后做一些操作
  • 0x02 参考资料

0x01 Vue 入门实战学习教程之实例生命周期

1.1 写在前面的话

上一篇博文1. Vue 入门教程之 Hello World,我们展示了 Vue 具有的一些显而易见的功能。

这篇博文我们一起来学习下 Vue 实例对象的生命周期。

曾面试过我的一位前辈说,如果想学习一门新的技术,应该从了解它的生命周期开始。

还记得上一篇博文中我们的Hello World 示例么?


<html>
	<head>
		<meta charset="utf-8">
		<title>vue-01-sampletitle>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
	head>
	<body>
		
		<div id="app">
		  {{ message }}
		div>
		
		<script type="application/javascript">
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		script>
	body>
html>

我们可以看到JS中通过Var app=new Vue({...}) 创建了一个Vue组件实例对象。

在面向对象的编程世界中,凡事有创建的对象,必然有其从创建到销毁的一个完整的生命周期。

Vue 当然也不例外。

  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM等。
  • 同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
    比如我们在实例对象的a属性被创建后就调用它可以这么写:
new Vue({   
    data: {
       a: 1   
    },  
    created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)   
   }
}) // => "a is: 1" 

1.2 Vue 实例生命周期

Vue组件实例对象的生命周期图示如下所示
2. Vue 入门实战学习教程之实例生命周期_第1张图片

  • 首先,Vue实例会在执行new Vue()时初始化,此时第一个钩子函数beforeCreate会被调用,同时响应式功能会被初始化.然后created 钩子函数会被调用。(从钩子的名字就能明白他们的执行机制:带有before 前缀的钩子会在相关工作之前被调用,然后真正执行相关的工作的钩子才会被触发。)
  • 接下来会解析模版——模版内容可以从template或render 选项获取,或者从Vue 初始化时所挂载元素的outerHTML 获取。此时,就可以开始创建DOM 元素了因为会先触发beforeMount钩子,然后创建DOM节点,之后再触发mounted钩子。

1.3 Vue 实例生命周期示例

示例如下:


<html>
	<head>
		<meta charset="utf-8">
		<title>Vue生命周期title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
	head>


	<body>
		<div id="app">
			{{ message }}
		div>

		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				},
				beforeCreate() {
				   console.log('beforeCreate()实例初始化之前被触发');	
				},
				created() {
					console.log('created() 在实例初始化之后被触发');
				},
				beforeMount() {
					console.log('beforeMount() have been executed');
				},
				mounted() {
					console.log('mounted() have been executed');
				},
				beforeUpdate() {
					console.log('beforeUpdate() have been executed');
				},
				updated() {
					console.log('updated() have been executed');
				},
				beforeDestroy() {
					console.log('beforeDestroy() have been executed ');
				},
				destroyed() {
					console.log('destroyed() have been executed ');
				},
			})
		script>
	body>
html>

我们可以看出一个Vue组件实例对象从创建到销毁大致依次经历了如下8 个方法。

  • beforeCreate: 在实例初始化前被触发
  • created: 在实例初始化之后,被添加到DOM之前触发。
  • beforeMounted:会在元素已经准备好被添加到DOM,但还没有添加的时候触发。
  • mounted:在元素创建后触发(但并不一定添加到了DOM,可以用next-Tick 函数来保证这一点)。
  • beforeUpdate: 会在由于数据更新将要对DOM 做一些更改的时候触发。
  • updated: 会在DOM的更改已经完成后触发
  • beforeDestroy:会在组件即将被销毁并且从DOM上移除时触发。
  • destroyed: 会在组件被销毁后触发。

虽然一共有八个方法,但是我们只需要记住created------>mounted------>updated-------->destroyed 就可以推到出其他四个。

1.4 确保元素添加到DOM上之后做一些操作

  • 有一点要注意,在Vue2.0中mounted钩子触发时并不保证元素已经被添加到DOM上,如果想保证元素已经被添加,可以调用Vue.nextTick()方法(也可以通过this.$nextTick()调用)并传入一个回调函数,在回调函数中添加需要在元素被添加到DOM之后运行的代码。

如果我们想保证元素已经被添加到DOM上做一些操作,那么我们可以这么写:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
	head>
	<body>
		<div id="app">
			<p>Hello worldp>
		div>
		<script>
			new Vue({
				el:'#app',
				mounted() {
					console.log('mounted have been executed ');
					//元素可能还没有添加到DOM上
					this.$nextTick(()=>{
						//确定元素已经被添加到DOM上了
						console.log('this.$nextTick have been executed ');
					});
				}
			})
		script>
	body>
html>

0x02 参考资料

  • Vue 官方文档
  • 《Vue.js 快跑:构建触手可及的高性能Web 应用》

本篇完~

你可能感兴趣的:(#,Vue,入门教程)