十分钟学会组件的生命周期，前端开发h5

更新阶段

beforeUpdate() {

console.log(“beforeUpdate”);

},//更新之前

updated() {

console.log(“updated”);

},//更新之后

卸载阶段

beforeDestroy() {

console.log(“beforeDestroy”);

},//卸载之前

destroyed() {

console.log(“destroyed”);

},//卸载之后

我们现在把代码整理在一起，看一下页面反馈

<button @click=“n++”>{{n}}

我们可以看到，反馈的是

创建前-创建后-挂在前-挂在后

我们点击下按钮，让数据的到一个更新在看反馈

我们可以看出，在上方的基础上，多了一个更新前-更新后

我们在阶段上输出一些东西看一下区别

beforeCreate() {

console.log(“beforeCreate”);

// console.log(this.$el) //undefined

// console.log(this.$data) //undefined

},

created() {

console.log(“created”);

// console.log(this.$el) //undefined

// console.log(this.$data) //获取到了

},

在创建前或者创建后，我们去获取$el都是获取不到的

但是我们仔创建后就可以获取data数据了

beforeMount() {

console.log(“beforeMount”);

// console.log(this.$el) //undefined

},

mounted() {

console.log(“mounted”);

// console.log(this.$el) //获取到了

},

在挂载前获取$el是获取不到的，但是挂载后就可以获取到了

也就是说，我们想要操作dom的话需要在挂载后才可以

现在我们给app.vue加一个子组件，看一下页面反馈

从流程可以看出来，我们执行的顺序为

父组件创建前-父组件创建后-父组件挂载前-子组件创建前-子组件创建后-子组件挂载前-子组件挂载后-父组件挂载后

我们现在来看一下，组件被销毁后执行的顺序

<button @click=“n++”>{{n}}

<button @click=“show = !show”>{{show}}