Vue实例的生命周期

2018-08-26 本文已影响22人昊啊昊儿哟

什么是生命周期

定义:生命周期是指vue实例或者组件从诞生到消亡经历的每一个阶段 ,在这些阶段的前后可以设置一些函数当做事件来调用.

参考
 生命周期
生命周期中的钩子函数

生命周期流程

vue生命周期流程图.png

图解:

new Vue();
- 初始化事件和生命周期
- beforeCreate
- 创建vue对象，向对象中注册属性和方法
- created
- 判断 vm对象中是否有el属性
  - 有
    - 再判断是否有template发展
      - 有
        
        将template中的内容进行渲染，渲染为虚拟dom（虚拟dom：生成页面结构不显示在页面）
      - 没有
        
        将 el 属性对应的内容进行渲染，渲染为虚拟dom
  - 没有
    - 会将这个vue对象当作组件来解决（根vue对象的是一样的），生成虚拟dom
- beforeMount
- 渲染：将虚拟dom渲染到页面上
- mounted
- 等待数据更新
  - beforeUpdate
  - 数据更新
  - updated
  - 再次渲染页面
  - 等待数据更新
- beforedestroy
- 销毁
- destroyed

beforeCreate

在Vue对象初始化完成之前执行
这个函数在执行时，vue对象还不存在 el,data,methods属性

创造vue实例之后运行此函数,vm中的data/methods中的成员不可以使用

beforeCreate:function () {
    console.log("创造vue实例中,data/methods不可以使用")
}

created

创造vue实例之后运行此函数,vm中的data/methods属性可以使用

在vue对象初始化之后执行
这个函数在执行时，vue对象中已经有el,data,methods属性

created:function(){
    console.log("创造vue实例中,data/methods可以使用")
}

beforeMount

在页面渲染之前执行
在这个函数中是无法得到this.$refs中的内容的

当vue实例的el节点或者组件挂载到页面以前运行此函数

beforeMount:function(){
    console.log("即将挂载el节点(组件)")
}

Mounted

在页面渲染之后执行
在这个函数中可以操作this.$refs

当vue实例el节点或组件挂载到页面以后运行此函数

mounted:function(){
    console.log("el节点(组件)挂载到页面完毕")
}

beforeUpdate

在更新之前执行
当vue实例数据发生改变前触发此函数

beforeUpdate:function(){
      console.log("vue实例数据即将发生改变")
}

updated

在更新之后执行
当vue实例数据发生改变后触发此函数

updated:function(){
    console.log("vue实例数据已经发生了改变")
}

beforedestroy

在vue对象被销毁之前执行

beforeDestroy() {
            console.log('即将销毁vue实例对象');
        }

destroyed

在vue对象销毁之后执行

destroyed() {
            console.log('vue实例对象被销毁了');
        }

综合:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ msg }}
        <input type="text" ref="txt" v-model="msg">
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello vue',
            dataList: []
        },
        // 在vue对象初始化之前执行
        beforeCreate(){
            console.log('beforeCreate');
            console.log(this.msg);// undefined
        },
        // 在vue对象初始化之后执行
        created() {
            console.log('created');
            console.log(this.msg);//hello vue
        },
        // 在页面渲染之前执行
        beforeMount() {
            console.log('beforeMount');
            console.log(this.$refs.txt);// undefined
        },
        // 在页面渲染之后执行
        mounted() {
            console.log('mounted');
            console.log(this.$refs.txt);// <input type="text">
        },
        // 在更新之前执行
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        // 在更新之后执行
        updated() {
            console.log('updated');
        },
        // 在对象被销毁之前执行
        beforeDestroy() {
            console.log('beforedestroy');
        },
        // 在对象被销毁之后执行
        destroyed() {
            console.log('destroyed');
        },
    });
</script>
</html>

Vue生命周期的总结

var vm = new Vue(); // 开启了一段生命周期

初始化vue对象（创建出来的vue对象是一个空对象，它里面什么都没有）
将数据渲染到vue对象操作的dom节点上（将数据替换掉app中的指令）
当数据发生改变时，将新的数据渲染到dom节点上（更新）
vue对象被销毁时（销毁）