[JavaScript知识库]Vue 生命周期流程(面向对象编程)

Vue 面向对象编程

面向对象的程序设计实质就是选用一种面向对象程序设计语言(OOPL)，采用对象、类及其相关概念所进行的程序设计。
其中面向对象语言是以对象作为基本程序结构单位的程序设计语言，指用于描述的设计是以对象为核心，而对象是程序运行时刻的基本成分。OOPL包括：java、golang、python、c++ 等服务端当下流行的语言。

1. 面向对象的思想中有两个重要概念：类、对象
2. new Vue()所有程序都会在其中执行，挂载到主干html上然后根据代码进行局部刷新，实现（SPA单页面应用），此时只是创建一个空对象用以加载数据，此时里面只是存在一些默认的js方法以及生命周期（比如：DOMContentLoaded、load）
3. beforeCreate(创建前)， 初始化一些data数据以及methods数据以及方法
4. created(创建后)， 此时已经初步具备模板生成条件，进行生成判断。是将<template>编译到render函数中；
   • vue的$mount 和直接指定el属性
     • 直接在在new一个vue的时候，直接指定对应的id选择器
     • 解析：vue 对象的mount()为 手动挂载，在项目中可用于延时挂载。（例如: 在挂载之前要进行一些其他操 作 、判断等），之后要手动挂载上。 new Vue()时，el和mount并没有本质上的不同.
5. beforeMount(载入前), 将生成的HTML挂载到对应的位置（此时还未将编译出的HTML渲染到页面上）【此处创建vm.$el放在内存中（这一步是为了后面数据发生变化准备，将真实DOM和虚拟DOM对比，提高DOM复用效率），并替换el元素】
6. mounted(载入后)，将内存中的虚拟DOM转为真实DOM插入页面，此时已完成整个页面的渲染。
7. beforeUpdate(更新前)，实时监控data里的数据变化，当页面数据需要更新时，更新之前触发该钩子，此时，vm中的数据时新的，但是页面依然是旧数据，即页面尚未和数据保持同步
8. updated(更新后)， 实时监控data里的数据变化，根据上面一部拿到的新数据，重新生成新的虚拟DOM，随后将新DOM与旧的虚拟DOM进行比较，最终完成页面更新，实现了从Model（模板）—>View（页面）的更新(真正的页面和数据保持同步，此时数据是新的，页面也是新的)
9. beforeDestroy(销毁前)，页面中所有的data、methods、指令等，都处于可用状态，但是马上要执行销毁过程；一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作；此时已经不能触发页面更新了（停止方法指令与视图直接的关系，但是这些方法任然存在）
   10.destroyed(销毁后) ,完全销毁，此时组件以及方法均无法使用

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖