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)
blank

相关推荐

  • 中国.NET培训机构排名

    中国.NET培训机构排名中国.NET培训机构排名第一名:睿智汇海第二名:东方标准第三名:威讯教育 转载于:https://blog.51cto.com/dempsey/155328

  • Java中常用的API[通俗易懂]

    Java中常用的API[通俗易懂]1.Calendar类(日期与时间处理)使用情况:publicstaticvoidmain(String[]args){Calendarc=Calendar.getInstance();intyear=c.get(Calendar.YEAR);intmonth=c.get(Calendar.MONTH)+1;intday=c.get(Calendar.DATE);intweek

  • ios -特殊符号大全分享给大家,直接复制粘贴就可以使用了!

    ios -特殊符号大全分享给大家,直接复制粘贴就可以使用了!░▒▬♦◊◦♠♣▣۰•●❤●•۰►◄▧▨♨◐◑↔↕▪▫☼♦♧♡♂♀♠♣♥❤☜☞☎☏⊙◎☺☻☼▧▨♨◐◑↔↕▪▒◊◦▣▤▥▦▩◘◈◇♬♪♩♭♪の★☆→あぃ£Ю〓§♤♥▶¤๑⊹⊱⋛⋌⋚⊰⊹≈๑۩۩….۩۩๑๑۩۞۩๑✲❈✿✲❈➹~.~◕‿-。☀☂☁【】┱┲❣✚✪✣✤✥✦❉❥❦❧❃❂❁…

  • 面试 SQL整理 常见的SQL面试题:经典50题

    面试 SQL整理 常见的SQL面试题:经典50题目录​SQL基础知识整理:常见的SQL面试题:经典50题三、50道面试题2.汇总统计分组分析3.复杂查询sql面试题:topN问题4.多表查询【面试题类型总结】这类题目属于行列如何互换,解题思路如下:其他面试题:SQL基础知识整理:select查询结果如:[学号,平均成绩:组函数avg(成绩)]from从哪张表中查找数…

  • 我的ubuntu6.10 源(source.list)

    我的ubuntu6.10 源(source.list)

  • 【180609】经典SQL语句大全(CHM)

    【180609】经典SQL语句大全(CHM)收集我们在平时使用SQL时的一些语法语句汇集,比如创建、备份、删除数据库的SQL脚本,这些当然是比较简了,还有复杂点的像备份、创建索引、复合SQL语句、创建视图、高级运算查询、EXCEPT运算符、INTERSECT运算符、使用外连接、SQL分组、复制或拷贝表、在线视图查询、存储过程调用、清理SQL、找重复记录等,另附有一些SQL经典技巧,比如精简SQL语句、压缩数据库、检查备份集、日志清除、数…

发表回复

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

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