vue 清空对象_Vue.js生命周期

什么是生命周期? Vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

有四个阶段, 分别为创建阶段, 挂载阶段, 数据更新阶段, 销毁阶段, 下面就来详细介绍这几个阶段.

1. 创建阶段

该阶段主要有两个钩子---创建前(beforeCreate)和创建后(created)

1.1 beforeCreate

• vue实例的挂载元素 $el(Vue实例关联的DOM元素) 和数据对象data都为undefined，还未初始化

1.2 created

• vue实例的数据对象data有了，$el还没有
• 在通常在此进行页面初始化操作或简单的Ajax请求（此时页面还未呈现，过多的请求会导致白屏）

2. 挂载阶段

2.1 beforeMount

• 触发时机: 在挂载开始之前被调用
• vue实例的$el和data都初始化了, 相关的 render 函数首次被调用, 生成虚拟DOM节点? 什么是虚拟DOM节点? 这个有被问到, 需要了解下, 可以参考下这篇文章:

浅谈Vue中的虚拟DOM

• 这个钩子比较少用

2.2 mounted

• 实例被挂载到DOM上, 这个时候真实的DOM已经被渲染, 通常用于执行Ajax请求以及进行DOM相关的操作.

3. 数据更新阶段

3.1 beforeUpdate

• 触发阶段: 只有数据更新时才调用，发生在虚拟 DOM 打补丁之前。适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 注意: 这个钩子的触发时机又被问过, 要知道 这里举一个例子可能更好理解:

var app = new Vue({
    el: '#app',
    data: {
        name: 'Zeke'
    },
    mounted(){
        this.name = 'Zeke Yang'
    },
    beforeUpdate(){
        console.log(this.$el.innerHTML) // <div class="test">Zeke</div>
        console.log(this.$el) // <div id=​"app">​<div class=​"test">​Zeke Yang<div>​</div>​
        console.log(this.name) // Zeke Yang
    }
})

3.2 updated

• 虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可以执行依赖于DOM的操作

updated(){
    console.log(this.$el.innerHTML) // <div class="test">Zeke Yang</div>
    console.log(this.$el) // <div id=​"app">​<div class=​"test">​ZeYang</div>​</div>​
    console.log(this.name) // Zeke Yang
}

4. 销毁阶段阶段

4.0 什么时候触发销毁(又被问过, 要知道)

• 手动调用vm.$destroy()方法
• 移除组件
• 路由切换

4.1 beforeDestroy

• 实例被销毁前调用，此时实例仍可访问
• 组件销毁时触发，this仍能获取到实例, 这个钩子函数一般做事件的移除、清空定时器

4.2 destroyed

• Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。视图并不会刷新，，但DOM节点依旧存在.

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

vue生命周期钩子函数详解

详解Vue生命周期【上】

【干货】详解vue生命周期