vue的生命周期及生命周期钩子函数

4 篇文章 0 订阅
1 篇文章 0 订阅


前言

  1. vue的生命周期:vue实例从创建的销毁的整个过程
  2. vue的生命周期函数:
    - vue生命周期钩子函数/vue生命周期钩子
  3. 附着了用户在不同的阶段添加自己代码依赖的机会

一、生命周期是什么?

借用官网的一句话就是:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中,具体vue做了些啥,我们今天来了解一下。

二、生命周期流程图示

在这里插入图片描述

三、生命周期各个阶段

1.创建阶段

  1. const vm = new Vue( )
  2. Init EventS & Lifecycle
    · 加载事件和生命周期函数
    · 这里的Events指仅仅是自己内部的事件

    示例:
   const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello world'},
      	mounted(){
      	
      },
    })

在加载过程中会将mounted()这个事件自动读取到本身的内存中,并不是将这个函数调用起来(仅仅只是读取,将其进行一个获取,并没有都这个事件进行调用),将配置的事件(函数)加载到自己的内部中。
3. 调用beforeCreate()
4. Init Injections & reactvity
  · 加载数据以及添加数据监听
  · 这里加载的是我们已经在data中配置的数据
  · 这一步在beforeCreate()函数和created()函数之间运行
  · 作用:加载data数据,这是已经给data中的各个属性添加了getset方法
  · 在该阶段主要实现了给数据/属性添加getset方法,实现数据的双向绑定,在此时也可以监听属性值

注意:
· 只有在这个时候data中的属性才会有响应
· 如果之后要添加属性,页面将不会出现响应,这也是经常出现的一个问题点
   解决方案:
    1):在初始的时候将属性值在data中申明好
    2):让这个属性的对象成为新的一个对象,那么此时所有的属性都会重新添加getset方法

const vm = new Vue({
	el: '#app',
    data: {
       message: 'hello world',
       info: {
         a: 1,
         b: 2,
       }
     },
     created(){ 
       this.info = {
   		...this.info,
   		c:3
   		}
     },
 });

这样做的目的在于将c这个属性值定义按时并不会赋值,这是为undefined 。如果后面重新对c进行赋值的话,就将info作为作为一个新的对象,这时就会重新添加getset方法
    3)


总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值