Vue面试（2）-- vue组件的使用和生命周期

1. props和$emit父子组件通讯

（父组件通过一个动态属性传递给子组件，子组件拿到后渲染；在子组件中绑定函数@add=”addHandler”，父组件中使用this.$emit(‘add’, this.title)）

（props：父组件向子组件传递信息，$emit：子组件向父组件触发事件）

2. 组件间通讯和自定义事件

（在绑定自定义事件时使用了函数名，方便解绑，否则可能造成内存泄漏）

index.vue

Input.vue

List.vue

3. 组件生命周期

通常可以分为3个阶段：挂载阶段---更新阶段---销毁阶段

（生命周期钩子 = 生命周期 = 生命周期函数 = 生命周期事件）

beforeCreate()

在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用 注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化

created()

在实例创建完成之后被立即调用，在这一步，实例已完成以下配置： 数据观测（data observer）、属性和方法的运算、watch/event事件回调 然而，挂载阶段还没开始，$el属性目前不可见 注意：在created里面，data和methods已经被初始化 如果要调用methods中的方法或者使用data中的数据，最早在created方法中

是否指定el和templete选项

表示vue开始编译模板，执行vue代码中的指令，最终在内存中生成一个编译好的最终模板字符串，渲染为内存中的DOM。此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中

beforeMount()

在挂载开始之前被调用，相关渲染函数首次被调用 表示模板已经编译完成，但是尚未把模板挂载到页面 在beforeMount执行的时候，页面中的元素msg还没有真正替换过来，只是之前的一些模板字符

创建vm.$el，并用其替换el

这一步，将内存中编译好的模板真实替换到页面中

mounted()

el被创建的vm.$el替换、挂载成功 表示内存中的模板已经真实的挂载到页面中，用户已经可以看到渲染好的页面了 注意：mounted是实例创建期间的最后一个生命周期函数，，当执行完mounted就表示实力已经被完全创建好了 如果要通过某些插件操作DOM结点，最早要在mounted中 只要执行了mounted就表示整个vue实例已经初始化完毕了，此时组件已经脱离了创建阶段，进入运行阶段

beforeUpdate()

数据更新时调用 页面上的数据还没有被更新，但是data数据已经被更新了，页面尚未和数据保持同步

updated()

组件DOM已经更新，组件更新完毕 页面和数据保持一致 注意：组件运行阶段的两个函数beforeupdate和update会根据数据改变又选择的触发

beforeDestroy()

解除绑定、销毁子组件、事件监听器 当执行beforeDestroy钩子函数时，vue实例就进入销毁阶段 当执行beforeDestroy时，实例所有的data和methods，以及过滤器、指令，都处于可用状态，此时还没有真正执行销毁过程

destroy()

组件已经被完全销毁，不可再用了

父子组件生命周期

父组件初始化完成才会初始化子组件；子组件渲染完，父组件才会完成渲染 

Index created
List created
List mounted
Index mounted

Index before updated
List before updated
List updated
Index updated

说明： 此笔记部分来源于双越老师的慕课课程： https://coding.imooc.com/learn/list/419.html