vue实例和vue组件的生命周期以及生命周期钩子函数

最新推荐文章于 2021-03-22 20:56:15 发布
最新推荐文章于 2021-03-22 20:56:15 发布
阅读量195 收藏
点赞数 1
分类专栏： vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangsiyisiyi/article/details/105107115
版权

实例或者组件的声明周期流程图以及钩子函数触发时间点
beforeCreate函数,实例初始化之前就会触发,这个函数没什么用,因为它什么也没拿到
created函数,实例初始化完了,会触发,这时候,可以拿到实例里面的data了,如果在这个函数内部,更改数据,不会触发updated和beforeUpdate函数
beforeMounte函数,虚拟dom生成之前触发,也可以拿到实例里面的数据
mounted函数,虚拟dom完成,并挂载好了,可以拿到页面中的元素了

beforeUpdate函数,dom挂载好了,但是data中数据会有变化,这个就会执行这个函数
updated函数,数据更新好了,节点更新好了,会触发这个方法

beforeDestroy 销毁实例或者组件之前,在这里可以清除事件绑定,定时器等等
destroyed销毁完实例或者组件,组件的dom结构还在,但是双向数据绑定,监听,事件这些都会取消

wangsiyisiyi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
请列举出3个Vue中常用的生命周期钩子函数?
LuckXinXin的博客
09-15 1549
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见 mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted被调用时 vm.$el 也在文档内。 activated: keep-alive组件激活时调用 ...
vue组件的生命周期以及钩子函数
丰柏林的博客
05-09 199
附上一张图 methods:{ changeTitle:function(){ // this.title = "changed"； this.$emit("titleChanged","子向父组件传值"); } }, beforeCreate:function(){ console.log("组件实例化之前执行的函数"); }, ...
vue生命周期及使用 && 单文件组件下的生命周期
weixin_34220834的博客
05-25 289
生命周期钩子 　　这篇文章主要记录与生命周期相关的问题。 之前，我们讲到过生命周期，如下所示： 根据图示我们很容易理解vue的生命周期： js执行到new Vue() 后，即进入vue的beforeCreate状态。 接着观察data下的数据，紧接着create。 create之后，就会检测是否含有el属性，如果有，就直接检测是否含有模板属性； 如果没有，就当vm.$mount(...
vue生命周期、钩子函数和组件
weixin_44270344的博客
03-20 128
一、官网的声明周期图片 二、vue1.0与vue2.0生命周期函数介绍 三、案例详解 1、简单的案例 {{ message }} 2、create和mounted 总结: beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 ...
vue生命周期、钩子函数
zhangxiaBaby的博客
11-05 151
vue生命周期： 1. new Vue()：创建vue对象。 2. beforeCreat：组件实例刚刚被创建，实例属性计算之前，如data等（el和data并未初始化）。     ---> Observe Data：监听data变化情况；     ---> Init Events：初始化vue内部事件； 3. created：组件实例创建完毕，实例属性加载完成，但还未生...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue生命周期与钩子函数简单示例
10-17
主要介绍了vue生命周期与钩子函数,结合简单实例形式分析了vue.js生命周期及钩子函数相关流程与实现技巧,需要的朋友可以参考下
详解Vue 实例中的生命周期钩子
12-12
在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。 Vue 实例化...
关于vue生命周期以及其中的钩子函数
Shura0的博客
03-24 197
beforeCreate（创建前） 在数据观测和初始化事件还未开始 created（创建后） 完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted（载入后）在el被新创建的vm...
vue的生命周期及钩子函数
最初的梦想
08-31 866
每个vue实例被创建时都会经历一系列初始化过程，例如：设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这些过程中会运行一些vue生命周期中的钩子函数，这些函数为用户提供在创建vue实例及创建完成后期不同阶段添加自己代码的机会。 钩子函数中的this指向当前vue实例。 vue实例生成及后期的钩子函数如下： beforeCreate created befor...
Vue实例的生命周期以及钩子函数
Tiger's blog
09-02 160
Vue实例的生命周期 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 从创建到销毁的过程，这些过程会伴随一些函数的自调用，我们称这些函数为钩子函数。 常用的钩子函数： beforeCreate 在实例初始化后，数据观测和事件配置之前被调用 create 在实例完成创建后，但页面还未被渲染 beforMount 在挂载开始之前被调用，此时页面还看不到真实数据，只是一个模板页面 mounted e
Vue实例的生命周期和钩子函数
五撸超人的博客
02-08 222
Vue实例的生命周期和钩子函数     最近在做一个项目时，想到可不可以使用钩子函数根据加载的数据注册JS方法，渲染DOM结点的样式，然后用created和mounted试了一下都会报错DOM结点未定义。又去官网翻了一下官方文档关于Vue实例生命周期的部分，特此记录下来。 简介 先放一张官网的图示：     每个Vue实例在被创建时都要经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将...
vue生命周期钩子函数的3个重要阶段
晚星的博客
03-22 368
4个重要阶段：挂载->运行->缓存->销毁 重要的3个阶段如下： 1.从vue实例生成到第次挂载完毕 beforeCreate->created ->beforeMount ->mounted 按照顺序只执行一次 2.运行时(第次完成谊染之 后再次修改响应式数据的时候) beforeUpdate -> updated 3.组件销毁时vm. $destroy() 组件销毁不代表视图dom移除指的是在vue内部移除掉当前组件和共它组件绑定的事件数据等 befo
vue生命周期钩子函数详解
热门推荐
小熊的博客
07-26 9万+
先放一张官网生命周期图： vue有8种生命周期函数： 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted...
Vue生命周期的钩子函数有哪些，分别作用是什么？
姗姗的博客
09-03 8468
1、VUE生命周期是VUE实例化或者组件创建到消亡的过程。 2、 beforeCreate 创建前的状态，初始化事件和生命周期。 3、创建完毕状态Init (初始化) injections (依赖注入) & reactivity (开始响应)。 4、beforeMount 挂载前状态， 是否有元素el，是否有模板，是否渲染到了函数内，是否作为模板进行了outerHTML渲染到了页 ...
Vue 3——生命周期钩子函数
小白菜的博客
08-19 1万+
可以直接导入 onXXX 一族的函数来注册生命周期钩子： import { onMounted, onUpdated, onUnmounted } from 'vue' const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmoun
Vue.js面试题整理
jingtian678的博客
06-06 1万+
一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewMo...
Vue 的父组件和子组件生命周期钩子函数执行顺序？
最新发布
05-30
在 Vue 中，父组件和子组件都有自己的生命周期钩子函数，它们的执行顺序是有一定规律的。下面是父组件和子组件常用的生命周期钩子函数执行顺序： 1. beforeCreate：先父后子； 2. created：先父后子； 3. beforeMount：先父后子； 4. mounted：先子后父； 5. beforeUpdate：先子后父； 6. updated：先子后父； 7. beforeDestroy：先子后父； 8. destroyed：先子后父。 在执行过程中，父组件的生命周期钩子函数先于子组件执行，但在 mounted 阶段时，子组件的 mounted 钩子函数先于父组件执行。这是因为在父组件 mounted 钩子函数执行时，子组件的模板已经被渲染成真实的 DOM，此时子组件的 mounted 钩子函数才会执行。 需要注意的是，在父组件的 created 钩子函数中，子组件的实例并没有被创建，只有在父组件的 mounted 钩子函数中，子组件才会被实例化。因此，在父组件的 created 钩子函数中，是无法访问子组件的实例的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值