Vue的生命周期（个人笔记加举例注释）

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量207 收藏 1
点赞数
文章标签： javascript css vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meuan/article/details/104765843
版权

生命周期

4(指生命周期的四个阶段) 8(指每个阶段有两个钩子函数) 2(指缓存的钩子函数) 1(捕获错误的钩子函数)

vue(实例) 组件的一生和人的一生极其相似

vue生命周期四个阶段：

  1. 创建 创建虚拟dom
  2. 挂载 由虚拟dom 变成真实dom
  3. 更新 更新数据 -> 更新dom元素
  4. 销毁 组件淘汰的时候，结束使命

生命周期图示
生命周期图示地址

11个生命周期钩子函数（到达某个时间阶段自动执行的函数）：

常用：

  1. created 做网络请求
  2. mounted 也可以做网络请求 还可以做初始化dom
  3. beforeDestory/destoryed 在组件销毁前擦屁股、解决遗憾
生命周期_创建
<!--以组件为例、全局的-->
<body>
  <div id="app">
    <hehe></hehe>
  </div>
  <template id="hehe">
    <div class = 'test'>
       <p ref='p'>{{num}}</p>
    </div>
  </template>
<script>
Vue.component('hehe',{
  template:'#hehe',
  data(){
    return {
      num:1
    }
  },
  beforeCreate() {
    // 创建之前 没有初始化数据  同时没有真实dom  基本不用
    console.log('创建之前')
    console.log('this',this)
    console.log('data',this.num)
    console.log('dom',this.$refs['p'])
  },
  created(){
    //创建结束 有数据 没有dom
    //有数据 就可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
    // 可以网络请求
    console.log('创建结束')
    console.log('this',this)
    console.log('data',this.num)
    this.num=5
    console.log('dom',this.$refs['p'])
  }
})

let vm=new Vue({
  el:"#app",

})

</script>
</body>
生命周期_挂载
<body>
  <div id="app">
    <hehe></hehe>
  </div>
  <template id="hehe">
    <div class = 'test'>
       <p ref='p'>{{num}}</p>
    </div>
  </template>
<script>
Vue.component('hehe',{
  template:'#hehe',
  data(){
    return {
      num:1
    }
  },
  beforeCreate() {
    // 创建之前 没有初始化数据  同时没有真实dom  基本不用
    console.log('创建之前')
  },
  created(){
    //创建结束 有数据 没有dom
    // 可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
    // 可以网络请求
    console.log('创建结束')
  },
  beforeMount() {
    // 挂载之前和created类似 有数据 可以改数据 没有dom  
    // 可以做网络请求
    console.log('挂载之前')
    console.log('this',this)
    console.log('data',this.num)
    console.log('dom',this.$refs['p'])
  },
  mounted(){
    //挂载结束 有数据 有dom 
    // 可以修改数据  可以修改dom
    // 初始化的操作 swiper
    console.log('挂载结束')
    console.log('this',this)
    console.log('data',this.num)
    this.num=5
    console.log('dom',this.$refs['p'])
  }
})

let vm=new Vue({
  el:"#app",

})

</script>
</body>
生命周期_更新
<!--更新是当数据data发生改变-->
<body>
  <div id="app">
    <hehe></hehe>
  </div>
  <template id="hehe">
    <div class = 'test'>
       <p ref='p'>{{num}}</p>
       <button @click='add'>add</button>
    </div>
  </template>
<script>
Vue.component('hehe',{
  template:'#hehe',
  data(){
    return {
      num:1
    }
  },
  methods: {
    add(){
      this.num++
    }
  },
  beforeCreate() {
    // 创建之前 没有初始化数据  同时没有真实dom  基本不用
    console.log('创建之前')
  },
  created(){
    //创建结束 有数据 没有dom
    // 可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
    // 可以网络请求
    // this.num=5
    console.log('创建结束')
  },
  beforeMount() {
    // 挂载之前和created类似 有数据 可以改数据 没有dom  
    // 可以做网络请求
  
   console.log('挂载之前')
  },
  mounted(){
    //挂载结束 有数据 有dom 
    // 可以修改数据  可以修改dom
    // 初始化的操作 swiper
    console.log('挂载结束')
    // this.num=7
  },
  beforeUpdate() {
    // 挂载之后数据更新的时候触发，挂载之前数据跟新不会触发
    // 此时数据 是更新之后的
    // 此dom 是更新之前的
    console.log('更新之前')  
    console.log('this',this)
    console.log('data',this.num)
    
    console.log('dom', this.$refs.p.innerHTML)
  },
  updated() {
    // 数据与dom都跟新完了触发
    // 此时数据 是更新之后的
    // 此dom 也是更新之后的
    // 注意做数据的修改操作 可能引起死循环
    console.log('更新之前')  
    this.num=Math.random()
    console.log('this',this)
    console.log('data',this.num)
    console.log('dom', this.$refs.p.innerHTML)
  },
  
})

let vm=new Vue({
  el:"#app",

})

</script>
</body>
生命周期_销毁
<body>
  <div id="app">
    <button @click='toggle'>toggle</button>
    <hehe v-if='show'></hehe>
  </div>
  <template id="hehe">
    <div class = 'test'>
       <p ref='p'>{{num}}</p>
    </div>
  </template>
<script>
Vue.component('hehe',{
  template:'#hehe',
  data(){
    return {
      num:1
    }
  },
  mounted() {
    console.log('组件挂载')
  },
  beforeDestroy() {
    // 销毁之前 有数据 有this 也都没用
    // 有dom
    console.log('销毁之前')
    console.log(this)
    console.log(this.num)
    console.log(this.$refs['p'].innerHTML)
  },
  destroyed() {
    // 销毁之后 有数据  有this 但是没有用
    // 没有dom
     console.log('销毁之后') 
     console.log(this)
     console.log(this.num)
     console.log(this.$refs['p'].innerHTML)
  }
})

let vm=new Vue({
  el:"#app",
  data:{
    show:false
  },
  methods: {
    toggle(){
      this.show=!this.show
    }
  },
})

</script>
</body>

综上四个例子

介绍这八个生命周期，是从这三个方向来分析下手：

  1. 有没有this对象
  2. 有没有数据
  3. 有没有dom
销毁生命周期的使用
<body>
  <div id="app">
    <button @click='toggle'>toggle</button>
    <!-- 呵呵组件 创建销毁 -->
    <hehe v-if='show'></hehe>
  </div>
  <template id="hehe">
    <div class = 'test'>
       <p ref='p'>{{num}}</p>
    </div>
  </template>
<script>
Vue.component('hehe',{
  template:'#hehe',
  data(){
    return {
      num:1
    }
  },
  mounted(){
    //将计时器挂载当前实例上
   this.timer=setInterval(() => {
      console.log(1)
    }, 1000);
  },
  destroyed() {
    // 回顾组件的一生 寻找遗留的遗憾、错事  然后解决遗憾(擦屁股)
    // 全局计时器 全局事件监听 
    clearInterval(this.timer)
  },
})

let vm=new Vue({
  el:"#app",
  data:{
    show:false
  },
  methods: {
    toggle(){
      this.show=!this.show
    }
  },
})

</script>
</body>
自带代码增幅
关注
前端新手学习vue-router-自理笔记
jessica的blog
10-07 160
学习Vue-Router 基础 1.安装 NPM npm install vue-router import Vue from ‘vue’ import VueRouter from ‘vue-router’ Vue.use(VueRouter) //Vue.use注册后可全局使用，在调用启动应用之前，自动阻止多次注册相同插件 VUE CLI 以项目插件的形式添加 vue add router 构建开发版 直接从gitlab上clone,然后build git clone https://github
vue生命周期（举例）
SnowLee
07-07 1445
2020版 P31—生命周期1 一般请求网络数据等操作要么在created（组件初始化之前）要么在mounted（组件初始化之后） P32—生命周期2 在方框对应位置是初始化数据和方法 所以对应的执行顺序如下： export default { name: 'LifeCircle', beforeCreate () { console.log('1.beforeCreate') }, data () { return { isShow: false,
vue生命周期图解（带注释）
weixin_48014441的博客
11-13 488
vue生命周期图解（带注释）
一个例子搞懂Vue实例的生命周期
知之为知之，不知为不知
05-27 815
复制以下代码试验下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个例子搞懂Vue实例的生命周期</title> </head> <body> <div id="app"> ...
vue生命周期笔记
lemon_hongcha的博客
03-17 144
beforeCreate 创建创建虚拟dom create created （创建完成 有数据(可修改数据) 没dom 用来网络请求） beforeMount （挂载之前 有数据(可修改数据) 没dom 用来网络请求） 挂载 虚拟dom变成真实dom出现在页面上在世 mounted （挂载完成 有数据(可修改数据) 有dom(可以修改dom) 初始化的操作） beforeUpdate ...
Vue学习之Vue的生命周期详细解释
five-five
03-21 1905
mounted（挂载后） 在组件被挂载到页面之后调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。beforeMount（挂载前） 在组件被挂载到页面之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。beforeUpdate（更新前） 在组件更新之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。updated（更新后） 在组件更新之后调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。
VUE课程笔记
Evildoerwjh的博客
09-06 300
VUE课件 一.第一个Vue程序 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。 MVVM源自于经典的M
Vue 01 基础用法、MVVM模型、生命周期
yavlgloss的博客
03-21 515
vue 基础用法 语法指令 MVVM模型 生命周期
Vue2+Vue3（脚手架）
qq_47296476的博客
01-17 1598
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
我的Vue(1)
qq_45812558的博客
02-15 507
Vue 一、初识Vue 1.1 Vue配置 在vue.js官网 的 学习目录中 安装开发版本的vue.js 然后拖动至相对应的文件夹中即可 因为国内无法方便访问chrome网上应用商店,所以在chrome浏览器中放置相对应的插件. vue_dev_tools.crx 1.2 初次使用Vue 1.2.1 创建html文件,在head文件中引入vue.js <head> <script src="../vue.js"></script> <!-- 并行文件夹的位置
Web开发-Vue3.x
baby_hua的专栏
03-12 302
Web开发-Vue3.x 回炉再造！2021 Vue3.0 前端全家桶学习笔记 Vue全家桶 Vue3.x 认识Vue3 Vue开发初体验 Vue CLI脚手架 VUE 基础语法 网络封装 组件化开发 VUE 路由应用 Vuex详解 Vue3的新特性 Vue3.x 认识Vue 构建用户界面的渐进式开发框架，2.x，新版3.x： vue核心库只关注视图层，易于上手，便于与第三方库整合； 和库不一样的是Vue是一套架构，会基于自身特点想用户提供一套完整的解决方案，控制权在框架本身，如果要换框架，
程序员编程笔记
weixin_40789007的博客
09-20 4526
1.查看电脑当前进程和端口cmd netstat -pid netstat -a 查看全部端口信息:netstat –ano 2.创建文件夹 mkdir 文件名或文件路径 3.删除文件夹 rmdir 4.删除文件 del 5.打开计算机calc 6.打开画图mspaint 7.用echo "写入新数据">d:\a.txt，echo 字符串 >文件路径 文件名(会覆盖原内容) 8.用echo "写入新数据">>d:\a.txt，echo 字符串 >文件路径 文件名.
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
vue的生命周期，每个生命周期做了哪些事情，以及钩子函数
qq_47443027的博客
03-10 2502
vue生命周期和生命周期钩子函数： vue 的生命周期是：vue 实例从创建到销毁，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数 vue生命周期钩子函数有哪些？ 生命周期钩子函数（11个） 类型 详细 beforeCreate Fun.
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 856
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 487
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 447
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 874
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
理解Vuex如何注入Vue生命周期
它不仅创建了一个全局的`Vuex.Store`构造函数，还确保在每个Vue组件实例的生命周期中都能正确地与Vuex Store交互。 Vuex的`install`方法会做的事情包括： 1. 注册全局`Vue`指令`v-bind:`和`v-model`的实现，使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值