Vue生命周期实例分析总结
目录
- 1. 概述
- 2. 页面钩子函数
- 3. 生命周期函数
1. 概述
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
简单来说，生命周期钩子函数就是一堆回调函数，在我们创建实例时，这些回调函数按顺序执行。
2. 页面钩子函数
| 名称 | 作用 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用。此时 data 和 methods 以及页面的DOM结构都没有初始化，什么都做不了，执行1次 |
| created | 在实例创建完成后被立即调用，此时data 和 methods 已经可以使用，但是页面还没有渲染出来，执行1次，用this对象 |
| beforeMount | 在挂载开始之前被调用，此时页面上还看不到真实数据，只是一个模板页面而已，执行1次 |
| mounted | el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面，可以进行数据请求等，执行1次 |
| beforeUpdate | 数据更新时调用，页面上数据还是旧的 n次 |
| updated | 由于数据更新完毕，页面上数据已经替换成最新的 n次 |
| beforeDestroy | 实例销毁之前调用，执行1次 |
| destroyed | 实例销毁后调用，执行1次 |
| activated | keep-alive 组件激活时调用 |
| deactivated | keep-alive 组件停用时调用 |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用 |
3. 生命周期函数
下面我们用代码实现以下生命周期函数的执行顺序：
<div id="app">
<input type="text" v-model="username">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: ''
},
// 初始化阶段生命周期 -- 它只都只执行1次
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
setTimeout(() => {
// 销毁
this.$destroy()
}, 2000);
this.timer = setInterval(() => {
console.log(111);
}, 1000);
},
// 更新阶段生命周期，它们会执行N次
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
// 销毁阶段 只执行1次
beforeDestroy() {
clearInterval(this.timer)
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
})
</script>
到此这篇关于Vue生命周期实例分析总结的文章就介绍到这了,更多相关Vue生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
VUE生命周期全面系统详解
目录 什么是生命周期 生命周期的作用 vue生命周期有哪些 Vue 生命周期总共分为几个阶段 1)beforeCreate创建前 2)created创建后 3)beforeMounte挂载前 4)mounted挂载后 5)beforeUpdate更新前 6)updated更新后 7)beforeDestroy销毁前 8)destroyed销毁后 问题 什么是生命周期 每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM
-
Vue生命周期函数调用详解
目录 生命周期 Vue.mixin 生命周期选项合并 调用生命周期函数 结语 生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi
-
vue3.0中setup的两种用法实例
目录 前言 一.setup函数的特性以及作用 二.setup函数的注意点: 用法1:结合ref使用 用法2:代码分割 总结 前言 这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 什么是setup setup是vue3新增的生命周期函数,setup的加入就是为了让vue3使用组合式API(Composition API).使用组合式API更符合大型项目的开发,通过setup可以将该部分抽离成函数,
-
Vue生命周期详解
这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子 1. 生命周期钩子函数 下面这张图是vue生命周期各个阶段的执行情况: 注意: created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息
-
详解Vue生命周期和MVVM框架
目录 生命周期 与动态组件有关的两个特殊的钩子: 与组件异常捕获有关的一个钩子: 生命周期有哪些 生命周期 组件从开始到结束的全过程 创建阶段:beforeCreate.created挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 组件从开始到结束的全过程 创建阶段:beforeCreate.created 挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 销毁阶段:beforeDestro
-
vue3 使用setup语法糖实现分类管理功能
目录 setup语法糖简介 setup语法糖中新增的api 模块简介 分类模块路由 分类列表组件 获取分类列表数据 分类表单组件 setup语法糖简介 直接在 script 标签中添加 setup 属性就可以直接使用 setup 语法糖了. 使用 setup 语法糖后,不用写 setup 函数,组件只需要引入不需要注册,属性和方法也不需要再返回,可以直接在 template 模板中使用. setup语法糖中新增的api defineProps:子组件接收父组件中传来的 props defineE
-
Vue生命周期与setup深入详解
目录 生命周期 生命周期函数 不同API的生命周期 setup介绍 1. 访问Props 2. setup上下文 3. 与渲染函数一起使用 生命周期 下图对比了vue3(左)和vue2(右)的生命周期:vue3将destoryed该名成了unmounted,相应的beforeDestory改成了beforeUnmounted.除此之外在组合式API中新增了个钩子函数:setup.它发生在beforeCreate之前. 先简单介绍下setup函数: setup() 钩子是在组件中使用组合式 API
-
Vue 全部生命周期组件梳理整理
目录 前言 生命周期 created:在创建之后使用: beforeMount:挂载数据到DOM之前会调用 mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM beforeUpdate:在更新DOM之前 调用该钩子 应用:可以获取原始的DOM updated:在更新DOM之后 调用该钩子 应用:可以获取最新的DOM beforeDestroy: destroyed: activated: 用于组件激活的功能 deactivated:用于组件被停用 前言 今天继续加油学习
-
Vue3中setup方法的用法详解
目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l
-
Vue生命周期实例分析总结
目录 1. 概述 2. 页面钩子函数 3. 生命周期函数 1. 概述 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码. 简单来说,生命周期钩子函数就是一堆回调函数,在我们创建实例时,这些回调函数按顺序执行. 2. 页面钩子函数 名称 作用 beforeCreate 在实例初始化之后,数据观测和事件配置之前
-
vue生命周期实例小结
本文实例分析了vue生命周期.分享给大家供大家参考,具体如下: 每个Vue实例都存在完整的生命周期,经历从创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程.如下图所示 钩子函数 vue的完整生命周期可分为三个阶段:初始化阶段.运行阶段和销毁阶段.共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy de
-
Android开发中Widget的生命周期实例分析
本文实例分析了Android开发中Widget的生命周期.分享给大家供大家参考,具体如下: Widget是android中桌面小控件,创建时必须继承AppWidgetProvider,AppWidgetProvider其实就是继承了BroadcastReceiver的Receiver的一种,widget有以下几个生命周期方法: 1.onEnabled方法:此方法在Widget第一次被创建的时候调用,并且只调用一次,此方法中常放入初始化数据,服务的操作. 2.onReceive方法:通Broadc
-
react 生命周期实例分析
本文实例讲述了react 生命周期.分享给大家供大家参考,具体如下: 组件挂载: componentWillMount(组件将要挂载到页面)->render(组件挂载中)->componentDidMount(组件挂载完成后) 组件更新: 1.shouldComponentUpdate(render之前执行,参数为ture时执行render,为false时不执行render) componentWillUpdate(shouldComponentUpdate之后执行) componentDid
-
Vue组件和Route的生命周期实例详解
先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat
-
Vue的属性、方法、生命周期实例代码详解
实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
-
深入理解Vue生命周期、手动挂载及挂载子组件
本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip
-
Vue生命周期和钩子函数的详解与经典面试题
目录 1. vue生命周期 2.钩子函数 2.1 分为4大阶段8个方法: 2.2 初始化阶段 2.3 挂载阶段 2.4 更新阶段 2.5 销毁阶段 面试题: 总结 1. vue生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 2.钩子函数 Vue 框架内置函数,随着组件的生命周期阶段,自动执行,特定的时间点,执行特定的操
-
一篇文章带你吃透Vue生命周期(结合案例通俗易懂)
目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.