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

清疚 2023-02-27 12:23 5阅读 0赞

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

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

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

## 1.1 写在前面的话 ##

上一篇博文[1. Vue入门实战教程之vue初体验][1. Vue_vue]，我们展示了 Vue 具有的一些显而易见的功能。

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

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

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>vue-01-sample</title>
    		
    		<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组件实例对象的生命周期图示如下所示][Vue]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70]

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

## 1.3 Vue 实例生命周期示例 ##

示例如下：

<!DOCTYPE html>
    <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上做一些操作，那么我们可以这么写：

<!DOCTYPE html>
    <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 world</p>
    		</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 1]
 *  《Vue.js 快跑:构建触手可及的高性能Web 应用》

--------------------

本篇完～

下一篇：[3. Vue入门实战教程之vue-element-admin初体验][3. Vue_vue-element-admin]

[1. Vue_vue]: https://xingyun.blog.csdn.net/article/details/107237211
[Vue]: https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70]: /images/20230209/5f1aaedd4a11440bb5dd6203b57ffba3.png
[Vue 1]: https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
[3. Vue_vue-element-admin]: https://xingyun.blog.csdn.net/article/details/107441635