vue.js之生命周期

vue 实例的生命周期

举例代码：

<div id="app">    {{name}}</div><script>    let app = new Vue({        el: "#app",        data: {            name: 'Tom',        },        beforeCreate() {            console.log('1.即将创建');            console.log(this.$data);            console.log(this.$el);            console.log('data和el还是undefined,不可用的');            console.log('-------------------------------------------');        },        created() {            console.log('2.创建完毕');            console.log(this.$data);            console.log(this.$el);            console.log('能读取到数据data的值,但是DOM还没生成')            console.log('-------------------------------------------');        },        beforeMount() {            console.log('3.即将挂载');            console.log(this.$data);            console.log(this.$el);            console.log('生成DOM,但此时{{ name }}还没有挂载data中的数据');            console.log('-------------------------------------------');        },        mounted() {            console.log('4.挂载完毕');            console.log(this.$data);            console.log(this.$el);            console.log('{{ name }}已经成功挂载渲染data.name的值：Tom');            console.log('-------------------------------------------');        },        beforeUpdate() {            console.log('5.即将更新渲染');            console.log('-------------------------------------------');        },        updated() {            console.log('6.更新成功');              console.log('-------------------------------------------');        },        beforeDestroy() {            console.log('7.销毁之前');              console.log('-------------------------------------------');        },        destroyed() {            console.log('8.销毁成功');            console.log('实例与视图的关系解绑，再修改name的值，视图再也不会更新了');            console.log('-------------------------------------------');        }    });</script>

---

console.log输出结果：

---

示意图：