vue2的生命周期详解(代码演示+源码)

这篇具有很好参考价值的文章主要介绍了vue2的生命周期详解(代码演示+源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一:生命周期的概念

        生命周期是指从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,它主要强调一个时间段。用一句话来概括就是:

Vue实例的生命周期: 从创建到销毁的整个过程

二:钩子函数

Vue框架内置函数,随着组件的生命周期阶段,自动执行 

作用:特定的时间点执行特定的操作 

三:vue2的生命周期

vue2的生命周期可以用一句话来划分就是:四大阶段,八个方法。

1.初始化阶段(Creation)

        1.beforeCreate:这是生命周期所执行的第一个钩子函数,执行于组件实例被创建之初,data 和 methods 中的数据还没有初始化。
        2.created:在实例创建完成后被调用,此阶段完成了数据观测 (data observer)、属性和方法的运算,以及 watch/event 事件的设置。但是此时还没有挂载到 DOM 上。

        3.代码和效果如下:

<template>
  <div>
    <div id="test">{{name}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代码'
      }
    },
    beforeCreate() {
      console.log('------------------初始化阶段------------------')
      //这里data 和 methods 中的数据还没有初始化,所以输出的应该是undefined
      console.log(`这是beforeCreate的执行:${this.name}`)
    },
    created() {
      //这里数据已经初始化了,可以输出data中的内容
      console.log(`这是Create的执行:${this.name}`)
      //因为在created()中还没有渲染到DOM页面,所以在渲染前修改,选的数据是下面的内容
      this.name = '在渲染到DOM之前就修改内容'
    }
  }
</script>

 

vue2生命周期,# vue2学习日常,vue.js,前端,javascript
运行结果

2.挂载阶段(Mounting)

        1.beforeMount:模板渲染,相关的 render 函数首次被调用,模板已经在内存中编译好了,但是尚未挂载到页面中去。

        2.mounted:在实例被挂载到 DOM 后调用,真实DOM生成,此阶段完成了模板编译并且将实例挂载到 DOM 上。

        3.代码和效果如下:

<template>
  <div>
    <div id="test">{{name}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代码'
      }
    },
    beforeCreate() {
      console.log('------------------初始化阶段------------------')
      //这里data 和 methods 中的数据还没有初始化,所以输出的应该是undefined
      console.log(`这是beforeCreate的执行:${this.name}`)
    },
    created() {
      //这里数据已经初始化了,可以输出data中的内容
      console.log(`这是Create的执行:${this.name}`)
      //因为在created()中还没有渲染到DOM页面,所以在渲染前修改,选的数据是下面的内容
      this.name = '在渲染到DOM之前就修改内容'
    },
    beforeMount() {
      console.log('------------------挂载阶段------------------')
      //开始编译数据,但是当前数据只在内存中渲染,并没有真实的渲染到html页面上
      console.log(`这是beforeMount的执行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      // 获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
      console.log(`这是mounted的执行:${document.getElementById('test').innerText}`)
    }
  }
</script>

 

vue2生命周期,# vue2学习日常,vue.js,前端,javascript
运行结果

3.更新阶段(Updating)

        1.beforeUpdate:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前,此阶段页面中渲染的数据还是旧的,但data里的数据是最新的,页面尚未和最新数据保持同步。

        2.updated:在数据更新完成后被调用,实例的 DOM 已经更新。

        3.代码和效果如下:

<template>
  <div>
    <div id="test">{{name}}</div>
    <el-button @click="name='点击更新的内容'">更新内容</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代码'
      }
    },
    beforeCreate() {
      console.log('------------------初始化阶段------------------')
      //这里data 和 methods 中的数据还没有初始化,所以输出的应该是undefined
      console.log(`这是beforeCreate的执行:${this.name}`)
    },
    created() {
      //这里数据已经初始化了,可以输出data中的内容
      console.log(`这是Create的执行:${this.name}`)
      //因为在created()中还没有渲染到DOM页面,所以在渲染前修改,选的数据是下面的内容
      this.name = '在渲染到DOM之前就修改内容'
    },
    beforeMount() {
      console.log('------------------挂载阶段------------------')
      //开始编译数据,但是当前数据只在内存中渲染,并没有真实的渲染到html页面上
      console.log(`这是beforeMount的执行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      //获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
      console.log(`这是mounted的执行:${document.getElementById('test').innerText}`)
    },
    beforeUpdate() {
      console.log('------------------更新阶段------------------')
      //页面上的数据还是以前的,内存中的数据是最新的
      console.log(`这是beforeUpdate的执行,页面数据:${document.getElementById('test').innerText}`)
      console.log(`这是beforeUpdate的执行,data数据:${this.name}`)
    },
    updated() {
      //页面上的数据和内存中的数据都是最新的
      console.log(`这是updated的执行,页面数据:${document.getElementById('test').innerText}`)
      console.log(`这是updated的执行,data数据:${this.name}`)
    }
  }
</script>

 

vue2生命周期,# vue2学习日常,vue.js,前端,javascript
运行结果

4.销毁阶段(Destruction)

        1.beforeDestroy:在实例销毁之前调用,此时实例仍然完全可用,还没有真正的执行销毁,vue从运行阶段进入到销毁阶段。

        2.destroyed:在实例销毁后调用,此阶段完成了实例的事件监听器和子组件的销毁,vue上所有的实例都不可以用了。

        3.代码和效果如下:

<template>
  <div>
    <div id="test">{{name}}</div>
    <el-button @click="name='点击更新的内容'">更新内容</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代码'
      }
    },
    render(h) {
      return h('div', [
        h('h1', this.name),
        h('button', {
          on: {
            click: () => {
              alert('点击了我')
            }
          }
        }, 'Click me')
      ]);
    },
    beforeCreate() {
      console.log('------------------初始化阶段------------------')
      //这里data 和 methods 中的数据还没有初始化,所以输出的应该是undefined
      console.log(`这是beforeCreate的执行:${this.name}`)
    },
    created() {
      //这里数据已经初始化了,可以输出data中的内容
      console.log(`这是Create的执行:${this.name}`)
      //因为在created()中还没有渲染到DOM页面,所以在渲染前修改,选的数据是下面的内容
      this.name = '在渲染到DOM之前就修改内容'
    },
    beforeMount() {
      console.log('------------------挂载阶段------------------')
      //开始编译数据,但是当前数据只在内存中渲染,并没有真实的渲染到html页面上
      console.log(`这是beforeMount的执行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      //获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
      console.log(`这是mounted的执行:${document.getElementById('test').innerText}`)
    },
    beforeUpdate() {
      console.log('------------------更新阶段------------------')
      //页面上的数据还是以前的,内存中的数据是最新的
      console.log(`这是beforeUpdate的执行,页面数据:${document.getElementById('test').innerText}`)
      console.log(`这是beforeUpdate的执行,data数据:${this.name}`)
    },
    updated() {
      //页面上的数据和内存中的数据都是最新的
      console.log(`这是updated的执行,页面数据:${document.getElementById('test').innerText}`)
      console.log(`这是updated的执行,data数据:${this.name}`)
    },
    beforeDestroy() {
      console.log('------------------销毁阶段------------------')
      // 仍可以使用data与method方法
      console.log(`这是beforeDestroy的执行:${this.name}`)
    },
    destroyed() {
      // 已经销毁data与method方法
      console.log(`这是destroyed的执行:${this.name}`)
    },
  }
</script>
vue2生命周期,# vue2学习日常,vue.js,前端,javascript
运行结果

 

5.生命周期图解

vue2生命周期,# vue2学习日常,vue.js,前端,javascript

6.两个特殊的生命周期钩子函数 

        vue2中有两个特殊的生命周期钩子函数,

  • activated: keep-alive 组件专属,组件激活时调用该函数。
  • deactivated:keep-alive 组件专属,组件被销毁时调用该函数。

总结 

         生命周期是vue2中一个很重要的知识点,同时也是面试中容易问到的高频面试点。熟练掌握了vue2的生命周期,可以让我们在项目开发过程中少走很多弯路,减少很多莫名其妙的bug,所以,希望本文能够对各位小伙伴有所帮助哦!

另:附上项目的Gitee源码,地址如下

vue2全家桶练习: 包含vue2下使用router路由跳转,vuex状态管理,inject注入,minixs混入,watch监听https://gitee.com/qianchen12138/vue2-family-bucket-practice文章来源地址https://www.toymoban.com/news/detail-767426.html

到了这里,关于vue2的生命周期详解(代码演示+源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2基础四、生命周期

    1、生命周期 Vue生命周期:一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁 创建阶段:创建响应式数据 挂载阶段:渲染模板 更新阶段:修改数据,更新视图 销毁阶段:销毁Vue实例 2、生命周期钩子 Vue生命周期过程中,会 自动运

    2024年02月15日
    浏览(79)
  • 【vue2】vue生命周期的理解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :vue生命周期的介绍、vue生命周期钩子函数详解,vue生命周期的执行顺序 目录 一、生命周期介绍 二、生命周期的构成 1. 生命周期的四个阶段 : 2.八大钩子作用: 1.bef

    2024年02月02日
    浏览(73)
  • vue2面试题:对vue生命周期的理解

    生命周期(life cycle)的概念应用很广泛,在政治、经济、环境、技术、社会等诸多领域都会经常出现,可通俗理解为“从摇篮到坟墓”的整个过程,在vue中从实例的创建到销毁过程就是生命周期,即从创建、初始化数据、编译模板、挂载Dom–渲染、更新–渲染、卸载等一系列

    2024年01月25日
    浏览(53)
  • vue2 生命周期,工程化开发入门

    1.生命周期 生命周期介绍 生命周期的四个阶段 生命周期钩子 声明周期案例 2.工程化开发入门 工程化开发和脚手架 项目运行流程 组件化 组件注册 思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期:就是一

    2024年02月11日
    浏览(62)
  • Vue2 的@hook 、 hook: 与生命周期

    优点:简单易上手 缺点:此种方法子组件必须是自己编写的组件,若引用第三方库这种方式则不可行 官方文档并没有太多相关解释,只在处理边界情况 #程序化的事件侦听器— Vue.js (vuejs.org)里有出现。 子组件无需相关处理就能实现侦听,这块的实现原理可以从源码里探究部

    2024年02月05日
    浏览(47)
  • Vue2和Vue3生命周期映射关系及异同

    beforeCreate - 使用 setup() created - 使用 use setup() beforeMount -onBeforeMount mounted - onMounted beforeUpdate - onBeforeUpdate updated - onUpdated beforeDestroy- onBeforeUnmount destroyed -onUnmounted activated - onActivated deactivated - onDeactivated errorCaptured - onErrorCaptured beforeCreate - 使用 setup() 函数替代 Vue 2 中的 beforeCrea

    2024年01月24日
    浏览(51)
  • Vue2(生命周期,列表排序,计算属性和监听器)

    前言 上一章博客我们讲解了Vue基础 这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器 一,生命周期 通常也叫生命周期回调函数、生命周期函数、生命周期钩子 vue初始化时在不同的阶段调用的不同函数 生命周期函数的 this 指向为vue实例,名字不能更改 1.1,生命周期函

    2024年02月13日
    浏览(55)
  • Vue2技能树(3)-声明式渲染、指令大全、生命周期函数

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! Vue2技能树(1)-介绍、导入使用、响应式数据绑定、组件化开发 vue2技能树(2)-模板语法、vue的工具链、渐进式框架 Vue2技能树(3)-声明式渲染、指令大全、生命周

    2024年02月07日
    浏览(51)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(51)
  • Vue2-收集表单数据、过滤器、内置指令与自定义指令、Vue生命周期

    🥔:我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js 1、不同标签的value属性 若: input type=\\\"text\\\"/ 普通输入框,则v-model收集的是value值,用户输入的就是value值。 若: input type=\\\"radio\\\"/ 单选框,则v-model收集的是value值,且要给标签配置value值。 若: input type=\\\"checkb

    2024年02月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包