3.vue生命周期钩子函数有哪些?(vue生命周期的理解)

定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。 vue的钩子函数图解: vue的钩子函数使用总结:1、beforeCreate(创建前):beforeCreate钩子函数,这个时候,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。无法访问到数据和真实的dom和data中的数据,可以在这里面使用l…

大家好,又见面了,我是你们的朋友全栈君。

定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。

 

vue的钩子函数图解:

3.vue生命周期钩子函数有哪些?(vue生命周期的理解)

 

vue的钩子函数使用总结:

1、beforeCreate(创建前):beforeCreate钩子函数,这个时候,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。无法访问到数据和真实的dom和data中的数据,可以在这里面使用loading

2、created(创建后):created函数中可以对data对象里面的数据进行使用和更改,不会触发其他的钩子函数,一般可以在这里做初始数据的获取也可以结束loading; 这里进行dom操作需要使用vue.nextTick()方法

3、beforeMount(挂载前):beforeMount钩子函数,vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。在这里也可以更改数据,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

4、mounted(挂载后):mounted钩子函数,此时,组件已经出现在页面中数据、真实dom都已经处理好了,事件都已经挂载好了,data.filter成功渲染可以在这里操作真实dom等事情…

5、beforeUpdate (更新前):当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿

6、updated(更新后):当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

7、beforeDestroy(销毁前):当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等

8、destroyed(销毁后):vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在。这个时候,执行destroyed,在这里做善后工作也可以

 

vue的钩子函数代码验证:

console打印效果:

3.vue生命周期钩子函数有哪些?(vue生命周期的理解)

demo验证代码:

<template>
  <div>
    <h3>{
  
  {testMsg}}</h3>
    <p style="color:red;" id="testNum">{
  
  {testNum}}</p>
    <div><button @click="changNum()">点击修改num的数值大小</button></div>
    <p style="color:red;">过滤器处理后的值:{
  
  {testNum | add(10,20)}}</p>
    <div><button @click="destroyVue()">销毁</button></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  // data是数据对象
  data () {   
    return {
      testMsg:"原始值",
      num:2,
    }
  },

  //computed对象包括需要计算的属性,属性值依赖于别的数据
  computed:{
    testNum:function(){
      let that =this;
      return that.num * 3;
    },
  },

  //检测某一属性值的变化,属性值的变化会造成其他dom变化
  watch:{
    testNum:function(val){
      if(val>9){
        console.log("testNum的值变得大于9了!");
      }
    }
  },

  //组件内部的方法
  methods:{
    changNum:function(){
      let that =this;
      that.num=5;
    },
    destroyVue:function(){
      this.$destroy();
    }
  },

  //过滤器对象,filter的第一个参数默认是当前的item值
  filters:{
    add:function(val,num1,num2){
      return val+num1+num2;
    },
  },

  //vue实例创建前
  beforeCreate:function(){
    console.group('beforeCreate 创建前状态===============》'); //console的分组打印
    console.log("%c%s", "color:red","el     : " + this.$el); //输出undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //输出undefined
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出undefined
    console.log("%c%s", "color:red","testNum: " + this.testNum);//输出undefined
    console.groupEnd(); 
  },

  //vue实例创建完成,可以进行data对象中数据操作,一般获取初始化数据
  created:function(){
    console.group('created 创建完成状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //输出undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //输出[Object Object] ,初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出:"原始值",初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//输出:6,可以computed计算
    console.groupEnd(); 
  },

  //vue实例挂载前,不能获取$el元素,生成的虚拟dom
  beforeMount:function(){
    console.group('beforeMount 挂载前状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //无输出,dom未生成
    console.groupEnd(); 
  },

  //
  mounted:function(){
    console.group('mounted 挂载完成的状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //输出[object HTMLDivElement],初始化成功
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //输出6,初始化成功
    console.groupEnd(); 
  },

  //更改data对象中数据后,页面渲染新数据前的状态
  beforeUpdate:function(){
    console.group('beforeUpdate 更新前的状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //初始化成功
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //初始化成功
    console.groupEnd(); 
  },

  //数据更改后并重新渲染后,dom也重新更新了
  updated:function(){
    console.group('updated 更新完成的状态==========');
    console.log("%c%s", "color:red","el     : " + this.$el); //初始化成功
    console.log("%c%s", "color:red","data   : " + this.$data); //初始化成功
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
    console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
    console.log($("#testNum").text());  //初始化成功
    console.groupEnd(); 
  },

  //销毁前
  beforeDestroy:function(){
    console.group('beforeDestroy 销毁前的状态');
    console.log("%c%s", "color:red","el     : " + this.$el); 
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);
    console.log("%c%s", "color:red","testNum: " + this.testNum);
    console.log($("#testNum").text());  
    console.groupEnd(); 
  },

  //销毁后修改data数据无效,生成的dom依旧存在
  destroyed(){
    console.group('destroyed 销毁完成的状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); 
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","testMsg: " + this.testMsg);
    console.log("%c%s", "color:red","testNum: " + this.testNum);
    console.log($("#testNum").text());  
    console.groupEnd(); 
  },

}
</script>

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128650.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python进阶(8)多进程「建议收藏」

    python进阶(8)多进程「建议收藏」进程前置知识点进程:一个程序运行起来后,代码+用到的资源称之为进程,它是操作系统分配资源的基本单元。并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任务“一起”执行

  • vim 退出命令(保存、放弃保存)[通俗易懂]

    vim 退出命令(保存、放弃保存)[通俗易懂]按ESC键跳到命令模式,然后::w            -保存文件,不退出vim:wfile  -将修改另外保存到file中,不退出vim:w!       &nbsp…

  • TOP命令详解(TOP10)

    原文http://rockhooray.blog.51cto.com/938613/832621一概述在终端中可以查看top命令的路径和所属软件包。top程序对运行的系统提供一个动态的实时的监控。它能够显示系统的总体信息和一些正被Linux内核管理的任务。它所显示的系统总体信息的样式以及任务信息显示的样式,顺序和大小都是可以由用户配置,而且配置信息可以重启后永久生

  • winrar3.7-winrar4.0的注冊码[通俗易懂]

    winrar3.7-winrar4.0的注冊码[通俗易懂]首先新建记事本文件(txt文件),把下面红色代码复制进去,然后将文件另存为以rarreg.key为文件名称的文件(当然因为设置的不同,可能出现你保存后的文件为rarreg.key.txt没关系

  • Ext.Panel的主要功能

    Ext.Panel的主要功能

    2021年11月30日
  • pci接口千兆网卡_千兆汇聚 和万兆网卡

    pci接口千兆网卡_千兆汇聚 和万兆网卡pcie接口是一种高速串行计算机扩展总线标准,是高速串行点对点双通道高带宽传输,所连接的设备分配独享通道带宽,不共享总线带宽,是替代旧的PCI,PCI-X和AGP总线标准的,主要支持主动电源管理,错误报告,端对端的可靠性传输,热插拔以及服务质量(QOS)等功能。PCIE接口的优势:相对于传统PCI总线在单一时间周期内只能实现单向传输,PCIE的双单工连接能提供更高的传输速率和质量。PCI-E插槽是…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号