Web前端最新十分钟学会组件的生命周期，前端系统工程师面试宝典

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

挂载阶段

beforeMount() {

console.log(“beforeMount”);

},//挂载之前

mounted() {

console.log(“mounted”);

},//挂载之后

更新阶段

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加一个子组件，看一下页面反馈

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HelloWorld–beforeDestroy");

},

destroyed() {

console.log(“HelloWorld–destroyed”);

}

};

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-7UZ2lEVx-1715210012367)]

[外链图片转存中…(img-OJ9ljJY3-1715210012368)]