Vue 中生命周期定义及流程
目录
- 一、生命周期定义
- 二、生命周期流程
- 三、总结
一、生命周期定义
生命周期：又名：生命周期回调函数、生命周期函数、生命周期钩子
生命周期是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的 this 指向是 vm 或组件实例对象
做一个小例子，要求页面的文字一上来透明度就周而复始的从1变到0
<div id="root">
<h2 :style="{opacity: opacity}">好好学习</h2>
<h2 :style="{opacity}">天天向上</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例
new Vue({
el: "#root",
data: {
opacity: 1
},//Vue完成模板解析，并把初始的真实dom放入页面后(挂载完毕)调用mounted
mounted(){
setInterval(()=>{
this.opacity -= 0.01
if(this.opacity <=0) this.opacity = 1
},20)
}
})
</script>
二、生命周期流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初识</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">天天向上</h2>
<button @click="opacity = 1">透明度设置为1</button>
<button @click="stop">点我停止变换</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例
new Vue({
el: "#root",
data: {
opacity: 1
},
methods:{
stop(){
this.$destroy()
}
},
mounted(){
this.timer = setInterval(()=>{
this.opacity -= 0.01
if(this.opacity <=0) this.opacity = 1
},20)
},
beforeDestroy(){
console.log("beforeDestroy")
clearInterval(this.timer)
}
})
</script>
</body>
</html>
三、总结
vm的一生(vm的生命周期)：
- 将要创建------>调用
beforeCreate函数 - 创建完毕------>调用
created豳数 - 将要挂载------>调用
beforeMount函数 - 挂载完毕------>调用
mounted函数【重要的钩子】 - 将要更新------>调用
beforeUpdate函数 - 更新完毕------>调用
updated函数。 - 将要销毁------>调用
beforeDestroy函数【重要的钩子】 - 销毁完毕------>调用
destroyed函数
常用的生命周期钩子：
- 1.
mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 - 2.
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例：
- 1、销毁后借助Vue开发者工具看不到任何信息
- 2、销毁后自定义事件会失效，但原生DOM事件依然有效
- 3、一般不会在
beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
到此这篇关于Vue 中生命周期定义及流程的文章就介绍到这了,更多相关Vue 生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
带你一文了解Vue生命周期钩子
目录 前言 生命周期钩子 选项式API(Options API) 生命周期流程图 运行生命周期挂钩 beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeUnmount() unmount() 组合式API(Composition API)中的生命周期钩子 setup() 替换 created() 和 beforeCreated() 钩子可以与 setup() 一起使用 总结 前言 和其他框
-
VUE生命周期全面系统详解
目录 什么是生命周期 生命周期的作用 vue生命周期有哪些 Vue 生命周期总共分为几个阶段 1)beforeCreate创建前 2)created创建后 3)beforeMounte挂载前 4)mounted挂载后 5)beforeUpdate更新前 6)updated更新后 7)beforeDestroy销毁前 8)destroyed销毁后 问题 什么是生命周期 每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM
-
Vue3生命周期Hooks原理与调度器Scheduler关系
目录 写在最前:本文章的目标 Vue3生命周期的实现原理 生命周期类型 各个生命周期Hooks函数的创建 创建生命周期函数createHook injectHook函数 生命周期Hooks的调用 Vue3调度器(Scheduler)原理 Vue父子组件的生命周期的执行顺序 父子组件的执行顺序 父子组件生命周期的执行顺序 组件卸载的时候,是在卸载些什么呢? 组件更新的调度器里的队列任务的失效与删除的区别 父子组件执行顺序与调度器的关系 Hooks的本质 最后 写在最前:本文章的目标 Vue3的生命
-
vue生命周期beforeDestroy和destroyed调用方式
目录 生命周期beforeDestroy和destroyed调用 情境一 情景二 beforeDestroy和destroyed生命周期函数的特点 生命周期beforeDestroy和destroyed调用 情境一 离开当前路由,会直接调用: 当前路由不使用 缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 情景二 离开当前路由,不会直接调用,需要程序控制调用: 当前路由使用 缓存,离开当前路由不会直接调用 beforeDestroy 和 befor
-
Vue 全部生命周期组件梳理整理
目录 前言 生命周期 created:在创建之后使用: beforeMount:挂载数据到DOM之前会调用 mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM beforeUpdate:在更新DOM之前 调用该钩子 应用:可以获取原始的DOM updated:在更新DOM之后 调用该钩子 应用:可以获取最新的DOM beforeDestroy: destroyed: activated: 用于组件激活的功能 deactivated:用于组件被停用 前言 今天继续加油学习
-
vue2与vue3中生命周期执行顺序的区别说明
目录 vue2与vue3中生命周期执行顺序区别 生命周期比较 简单例子说明 三种情况下的生命周期执行顺序 1.单页面下生命周期顺序 2.父子.兄弟组件的生命周期顺序 3.不同页面跳转时各页面生命周期的执行顺序 vue2与vue3中生命周期执行顺序区别 生命周期比较 vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destro
-
Vue中的生命周期介绍
什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreate Created beforeMount mounted beforeUpdate updated beforeDestroy destroyed Vue组件的生命周期共分为三个阶段,如下图所示: 创建阶段和销毁阶段在组件的生命周期中只会执行一次,而更新阶段会执行多次. 先看一下创建阶段完成的事情:
-
详解Vue生命周期和MVVM框架
目录 生命周期 与动态组件有关的两个特殊的钩子: 与组件异常捕获有关的一个钩子: 生命周期有哪些 生命周期 组件从开始到结束的全过程 创建阶段:beforeCreate.created挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 组件从开始到结束的全过程 创建阶段:beforeCreate.created 挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 销毁阶段:beforeDestro
-
Vue生命周期详解
这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子 1. 生命周期钩子函数 下面这张图是vue生命周期各个阶段的执行情况: 注意: created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息
-
Vue 中生命周期定义及流程
目录 一.生命周期定义 二.生命周期流程 三.总结 一.生命周期定义 生命周期:又名:生命周期回调函数.生命周期函数.生命周期钩子 生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的 this 指向是 vm 或组件实例对象 做一个小例子,要求页面的文字一上来透明度就周而复始的从1变到0 <div id="root"> <h2 :style="{opaci
-
Vue 2.0中生命周期与钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0
-
Vue实例中生命周期created和mounted的区别详解
前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注
-
基于Vue实例生命周期(全面解析)
前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即
-
Vue组件生命周期三个阶段全面总结讲解
目录 组件生命周期 创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 运行阶段 beforeUpdate阶段 updated阶段 销毁阶段 beforeDestroy阶段 destroyed阶段 总结 组件生命周期 生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before
-
vue的生命周期钩子与父子组件的生命周期详解
目录 vue的生命周期钩子的介绍 父子组件的生命周期 加载渲染过程 父组件更新过程 子组件更新过程 父子组件更新过程 销毁过程 代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom
-
一文搞懂Vue八大生命周期钩子函数
目录 一.速识概念: 二.八大生命周期钩子函数: 三.结合代码了解: 1. beforeCreate: 2.created: 3.beforeMount: 4.mounted: 5.beforeUpdate: 6.updated: 7.beforeDestroy: 8.destroyed: 一.速识概念: 我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期.而生命周期函数,就是在某个时刻会自动执行的函数. 按照官方的原话,就是每个 Vue 实例在被创建时都要经过一
-
vue组件生命周期详解
本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下 分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码: <!do