Vue.JS快速上手（组件生命周期）

一、什么是组件

组成网页独立功能基本单元(片段), 复用、维护、性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed。

一个Vue.js的应用程序，实际是由一个根组件(实例)+多个子组件(实例)组成。说白了组件其实就是自定义标签。

二、组件化意义

1. 页面元素及逻辑的复用

2. 易于页面的重构与维护

3. 提升页面渲染性能

三、组件基本用法

1.全局注册

第1步：创建组件

 

 第2步：使用组件

 

 2.局部组件基本用法

 

 四、组件生命周期

一个组件从创建到销毁的过程,需要在组件的生命周期中执行自定义业务操作,这些操作就写在生命周期钩子(hook)中。钩子：组件生命周期中自动调用的函数, 组件生命周期过程自动触发的事件，常用生命周期钩子如下：

第1阶段：初始化阶段

beforeCreate: 组件实例化之后，在没有完成创建之前, 可以访问this,但不能访问data和props

created: 组件完全创建完成，可以访问this以及data和props,本地数据初始化

【注】初始化阶段，DOM已经创建完成，但没有挂载到DOM树，也就是说以上两个钩子内无法通过document访问组件内部的DOM元素

第2阶段：挂载阶段

beforeMount: 挂载前，可以访问this以及data和props,但当前组件并没有挂载到DOM树上，所以当前组件内无法通过document访问级件内容的元素

mounted: 组件挂载到DOM树上, 可以访问DOM元素，以及this/data/props,通过用来完成比较复杂的业务操作以及Ajax请求. append

第3阶段：更新跟踪阶段

beforeUpdate: 组件数据更新前

updated: 组件数据更新后，尽量不要操作引钩子

第4阶段：销毁阶段

beforeDestroy: 销毁前

destroyed: 销毁后, 当组件从DOM树上移除时触 发, remove

【注】手工释放不会自动销毁的资源，如定时器

【注】

初始加载组件，会触发beforeCreate->created->beforeMount->mounted

更新数据, 会触发 beforeUpdate -> updated

销毁组件，会触发 beforeDestroy -> destroyed