Vue的生命周期钩子函数

一、Vue的生命周期共分为四个阶段

1.创建实例
2.DOM渲染
3.数据更新
4.销毁实例

二、共有八个基本钩子函数

1.beforeCreate —创建前
触发的行为：Vue实例的挂载元素$el和对象data都为undefined，还未初始化
此阶段可以做的事情：加loading事件

2.created —创建后
触发的行为：Vue实例的data已经有数据了，但是$el还没有
此阶段可以做的事情：解决loading，发请求拿数据为mounted渲染做准备

3.beforeMount —渲染前
触发的行为：Vue的$el和data都初始化了，但是虚拟DOM节点，具体的data.filter还未替换
此阶段可以做的事情：created能做的它也能做

4.mounted —渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用

5.beforeUpdate —更新前
触发的行为：data更新时触发
在此阶段可以做的事情：。。。

6.updated —更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

7.beforeDestroy —销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁

8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

Vue的生命周期钩子函数相关推荐

详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段一:实例创建二:DOM渲染三:数据更新四:销毁实例共有八个基本钩子函数 1.beforeC ...
教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue的生命周期钩子函数的作用
之前在大学学习Java的时候笔试题的第一道题经常是你是怎么理解生命周期的在vue的生命周期却又与Java不同的一个java类的完整的生命周期会经历加载.连接.初始化.使用.和卸载五个阶段: 而v ...
VUE页面生命周期钩子函数
预备知识: 1.vue的生命周期生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件 2. 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据. ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...

Vue的生命周期钩子函数

Vue的生命周期钩子函数

一、Vue的生命周期共分为四个阶段

二、共有八个基本钩子函数

Vue的生命周期钩子函数相关推荐

最新文章

热门文章