十分钟学会组件的生命周期

},

beforeCreate() {

console.log("beforeCreate");

},

created() {

console.log("created");

},

beforeMount() {

console.log("beforeMount");

},

mounted() {

console.log("mounted");

},

beforeUpdate() {

console.log("beforeUpdate");

},

updated() {

console.log("updated");

},

beforeDestroy() {

console.log("beforeDestroy");

},

destroyed() {

console.log("destroyed");

},

};

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506200829695.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们可以看到，反馈的是  

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



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

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020050620101882.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

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



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

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506202324783.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

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

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



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

<button @click="n++">{{n}}</button>

<button @click="show = !show">{{show}}</button>

<HelloWorld v-if="show"></HelloWorld> 

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506202958214.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们先再看一下点击之后浏览器的反馈  

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020050620311446.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们可以看出，在原本的基础上，多了一个  

`父组件更新前-子组件销毁前-子组件销毁后-父组件更新前`



我们现在来看一下组件传参

父传子

<button @click="n++">{{n}}</button>

<button @click="show = !show">{{show}}</button>

<HelloWorld v-if="show" :n="n"></HelloWorld> 

自组件接收

<h1>{{n}}</h1>

props: [“n”],

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506203601742.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

这个时候我们点击一下按钮，父组件会更新数据，子组件也会更新  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506203706437.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们可以看出父组件和子组件的数据都得到了更新，然后顺序还是和上述一样的





### 文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。



这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。



![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)