Vue 生命周期流程(面向对象编程)

Vue 面向对象编程

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

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

Vue 生命周期流程(面向对象编程)相关推荐

Vue 生命周期篇探索 - 第二篇：生命周期-挂载流程
文章目录探索学习 Vue 生命周期篇第二篇:生命周期-挂载流程以图例分析挂载流程 1. new Vue 2. init Events & Lifecycle 3. beforeCreat ...
Vue 生命周期篇探索-第三篇：生命周期-更新流程
文章目录探索学习 Vue 生命周期篇第三篇:生命周期-更新流程生命周期-更新流程 1. mounted(挂载后) 2. beforeUpdate (更新前) 3. Virtual DOM re- ...
Vue 生命周期探索：第四篇：生命周期-销毁流程
文章目录探索学习 Vue 生命周期篇第四篇:生命周期-销毁流程生命周期_销毁流程 1. beforeDestory (销毁前) 2. Teardown watchers,child compon ...
【Vue生命周期详解】
细谈Vue声明周期什么是生命周期? Vue的生命周期 beforeCreate( 创建前 ): created ( 创建后 ): beforeMount: mounted: beforeUpdate ...
详解vue生命周期及每个阶段适合进行的操作
VUE生命周期的四个阶段 create 创建 -------- 创建vue实例并初始化 mount 挂载 -------- 把vue实例和视图进行关联 update 更新 ------- 监听数据与视 ...
vue 生命周期_Vue生命周期小白看了都会的
最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...
聊聊 vue 生命周期
一.常用的常用的生命周期钩子: mounted: 发送 ajax 请求.启动定时器.绑定自定义事件.订阅消息等[初始化操作] mounted() {console.log('vm 实例被挂载之后:mo ...
vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
Vue生命周期及各组件间的执行情况
文章目录前言一.Vue的生命周期是什么? 二.Vue生命周期中具体过程 1.Vue生命周期中的函数创建Vue实例期阶段: 运行阶段: 销毁阶段: 2.加入keep-alive后 1)keep-a ...

Vue 生命周期流程(面向对象编程)

Vue 面向对象编程

Vue 生命周期流程(面向对象编程)相关推荐

最新文章

热门文章