携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天点击查看活动详情

重要的生命周期钩子

mounted： 发送 Ajax 请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
beforeDestroy： 清除定时器、解绑自定义事件、取消消息订阅等[收尾工作]

销毁 Vue 实例：
1、销毁后借助 Vue 开发者工具看不到任何消息。
2、销毁后自定义事件会失效，但原生DOM 事件依然有效
3、一般不会在beforeDestroy 操作数据，因为即使操作数据，也不会再触发更新流程

生命周期执行顺序
将要创建(beforeCreate) → 创建完毕 → 将要挂载(beforeMount) → 挂载完毕(mounted) [重要的钩子] → 将要更新(beforeUpdate) → 更新完毕 → 将要销毁(beforeDestroy) [重要的钩子] → 销毁完毕(调用 destroyed 函数)

组件

传统编写应用：1、依赖关系混乱，不好维护 2、代码复用率不高

组件的定义 实现应用中 局部功能代码和资源的集合 为什么使用组件：一个界面的功能很复杂 作用：复用编码、简化项目编码、提高运行效率

可复用的 Vue 实例 组件中的 data 必须是函数，不然可能会影响到其他的实例

模块化：当引用中的 js 都是以模块来编写的，那这个应用就是一个模块化的应用 组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件组件：一个文件中包含 N 个组件。
单文件组件：一个文件中只包含有 一个组件。 (.vue 文件)

父子组件生命周期执行顺序

创建： 父组件先创建后子组件创建；子组件挂载完父组件挂载：父beforeCreate -> 父create → 子beforeCreate → 子create → 子mounted → 父mounted

加载渲染： 父组件加载完加载子组件：父beforeCreate → 父crerate → 父beforeMounted → 子beforeCreate → 子create → 子beforeMounted → 子mounted → 父mounted

更新： 子组件更新完毕更新父组件：父beforeUpdate → 子beforeUpdate → 子update → 父update

销毁： 子组件销毁后销毁父组件：父beforeDestroy → 子beforeDestroy → 子destroyed → 父destroyed