Vue组件化编程(1)

Vue组件化编程(1)

1、引出生命周期

1、生命周期又称为：生命周期回调函数，生命周期函数，生命周期钩子函数

2、是什么：Vue在关键时刻班我们调用的一些特殊名称的函数

3、生命周期函数的名字不可更改，但是函数中的执行逻辑是由程序员所进行编写

4、生命周期函数中的this指向为Vm或者为组件实例对象

第一个生命周期函数：mounted(){}

mounted：挂载完毕

该方法执行的条件为：只有页面第一次初始的真实DOM加载完毕才会进行调用，其他情况不会执行

2、分析生命周期

1、生命周期触发流程

生命周期存在8个回调方法，也是四对，而一个完整的Vue实例通常要经历四个流程

规则创建流程–>数据挂载流程–>数据更新流程–>数据销毁流程

翻译	调用方法	详情
将要创建	beforeCreate	初始化数据监测、数据代理准备开始；此时该方法还无法获取vm中的数据
创建完毕	created	初始化数据监测、数据代理完成；此时已经可以访问到vm中的数据了
将要挂载	beforeMount	数据挂载之前；此时数据对页面的初始化渲染还未开始
挂载完毕	mounted	数据挂载完毕；此时数据对页面的初始化渲染已经完成，页面中的内容已经发生改变
将要更新	beforeUpdate	页面更新之前；此时用户对vm中的数据已经发生更改，但页面还未更新
更新完毕	updated	页面更新完毕；此时页面已经通过用户修改的数据 将页面更新
将要销毁	beforeDestroye	Vue实例触发了销毁操作，Vue即将销毁但是还未开始，这里通常进行收尾操作
销毁完毕	destroyed	Vue实例已经完成了销毁

2、常用的生命周期钩子

1、mounted：发送ajax请求、启动定时器、绑定自定义时间、订阅消息

2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅等收尾工作

3、关于销毁Vue实例需要注意的事：

销毁实例只需调用 vm.$destroy()即可

1. Vue实例销毁完毕后借助Vue开发者工具将看不到任何信息
2. 销毁之后的自定义事件会生效、但是原生的DOM事件依然存在
3. 一般不会在beforeDestroy()方法中操作数据，因为哪怕修改了数据Vue也会在触发更新流程了
4. 销毁操作一但触发，对于Vue实例中的数据操作 Vue都不会进行页面更新了

4、Vue的工作流程

首先当我们执行了 newVue(){} 这串代码时 Vue的工作就已经开始了

第一步：开始制定规则 例如指令、指令修饰符等规则

此时就已经存在vm的实例对象了，但是里面没有数据

第二步：开始创建数据监测、数据代理等操作

创建完毕后 这一步便可以开始对vm中的数据进行访问/修改了，通常执行一些初始化操作

第三步：开始数据挂载

准备将初始化的数据渲染到页面中的指定位置

注意数据挂载完毕对页面的一些DOM操作都是不奏效的

第四步：用户动态更新了数据，

检测到数据变化之后吗，Vue也会进行更新页面等响应式操作

第五步如果Vue被触发了销毁命令，那么Vue将会开始销毁

注意此时数据发生修改也不会再触发页面渲染的更新，通常在销毁之前执行一些收尾工作