[Vue]生命周期

最新推荐文章于 2024-06-28 18:39:53 发布
最新推荐文章于 2024-06-28 18:39:53 发布
阅读量356 收藏 2
点赞数 1
分类专栏： Vue 学习笔记 文章标签： vue.js javascript 前端 前端框架 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127255209
版权

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 生命周期

生命周期，又名：生命周期回调函数、生命周期函数、生命周期钩子。生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm 或 组件实例对象。

生命周期函数的书写位置与data、methods同级

2. 生命周期流程

在这里插入图片描述

2.1 初始化

在这里插入图片描述

初始化阶段模板未解析，页面显示的内容为代码中的样式，代码写什么样就显示什么样。

2.1.1 beforeCreate()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h2>n的值：{{n}}</h2>
    <button @click="add">点击n++</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 0
    },
    methods: {
      add() {
        this.n++
      }
    },
    beforeCreate() {
      console.log('---- beforeCreate ----')
      // 访问vue实例中的data和methods
      console.log(this._data)
      console.log(this.n)
      console.log(this.add)
      debugger
    },
  })
</script>
</html>

在这里插入图片描述

2.1.2 created()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h2>n的值：{{n}}</h2>
    <button @click="add">点击n++</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 0
    },
    methods: {
      add() {
        this.n++
      }
    },
    beforeCreate() {
      console.log('---- beforeCreate ----')
      // 访问vue实例中的data和methods
      // console.log(this._data)
      // console.log(this.n)
      // console.log(this.add)
      // debugger
    },
    created() {
      console.log('---- created ----')
      // 访问vue实例中的data和methods
      console.log(this._data)
      console.log(this.n)
      console.log(this.add)
      debugger
    },
  })
</script>
</html>

在这里插入图片描述

2.2 模板的编译

在这里插入图片描述

2.2.1 outerHTML & innerHTML

在这里插入图片描述

2.2.2 beforeMount()

    beforeMount() {
      console.log('---- beforeMount ----')
      debugger
    },

这里是引用

在这里插入图片描述
在这里插入图片描述

2.2.3 mounted()

    mounted() {
      console.log('---- mounted ----')
      debugger
    },

在这里插入图片描述

此时对DOM元素操作有效
在这里插入图片描述
在这里插入图片描述

2.2.4 template配置项提供模板

使用template配置项提供模板，提供的目标只能有一个根节点，使用template配置项提供模板，vue不会编译解析提前提供的容器，即只解析提供的innerHTML。

不能使用template标签作为根节点

不使用template配置项提供模板，vue编译解析的为outerHTML。
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root" :x="n">
    
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    // 字符串换行书写，使用es6的模板字符串
    template: `
    <div>
      <h2>n的值：{{n}}</h2>
      <button @click="add">点击n++</button>
    </div>
    `,
    data: {
      n: 0
    },
    methods: {
      add() {
        this.n++
      }
    },
    beforeCreate() {
      console.log('---- beforeCreate ----')
    },
    created() {
      console.log('---- created ----')
    },
    beforeMount() {
      console.log('---- beforeMount ----')
    },
    mounted() {
      console.log('---- mounted ----')
    },
  })
</script>
</html>

在这里插入图片描述

2.2.5 $el

    mounted() {
      console.log('---- mounted ----')
      console.log(this.$el)
      console.log(this.$el instanceof HTMLElement)
      // debugger
    },

在这里插入图片描述

2.3 数据更新

在这里插入图片描述

2.3.1 beforeUpdate()

    beforeUpdate() {
      console.log('---- beforeUpdate ----')
      // 打印更新后的数据
      console.log(this.n)
      debugger
    },

在这里插入图片描述

2.3.2 update()

    updated() {
      console.log('---- updated ----')
      // 打印更新后的数据
      console.log(this.n)
      debugger
    },

在这里插入图片描述

2.4 销毁

在这里插入图片描述

销毁vue实例对象，调用vm.$destroy()方法，在开发中一般不使用该方法。

2.4.1 beforeDestroy()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root" :x="n">
      <h2>n的值：{{n}}</h2>
      <button @click="add">点击n++</button>
      <button @click="destroy">点击销毁</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      methods: {
        add() {
          this.n++
        },
        // 销毁vue实例对象
        destroy() {
          this.$destroy()
        },
      },
      beforeCreate() {
        console.log('---- beforeCreate ----')
        // 访问vue实例中的data和methods
        // console.log(this._data)
        // console.log(this.n)
        // console.log(this.add)
        // debugger
      },
      created() {
        console.log('---- created ----')
        // 访问vue实例中的data和methods
        // console.log(this._data)
        // console.log(this.n)
        // console.log(this.add)
        // debugger
      },
      beforeMount() {
        console.log('---- beforeMount ----')
        // debugger
      },
      mounted() {
        console.log('---- mounted ----')
        // console.log(this.$el)
        // console.log(this.$el instanceof HTMLElement)
        // debugger
      },
      beforeUpdate() {
        console.log('---- beforeUpdate ----')
        // 打印更新后的数据
        // console.log(this.n)
        // debugger
      },
      updated() {
        console.log('---- updated ----')
        // 打印更新后的数据
        // console.log(this.n)
        // debugger
      },
      beforeDestroy() {
        console.log('---- beforeDestroy ----')
        // 此时data中的数据和methods中的方法还可以使用
        this.add()
        console.log(this.n)
        debugger
      },
    })
  </script>
</html>

在这里插入图片描述

2.4.2 destroy()

3. 生命周期 总结

vue不同函数间使用同一个变量，可以将变量挂在vue实例上(this->vue实例vm)。

  • 常用的生命周期钩子：
    • 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
    • 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
  • 关于销毁Vue实例
    • 1.销毁后借助Vue开发者工具看不到任何信息。
    • 2.销毁后自定义事件会失效，但原生DOM事件依然有效。
    • 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
小炜1128
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
Vue生命周期详解
Phoneix的博客
06-25 9949
目录 前言： 一、生命周期流程图详解 1.beforeCreate、Created 2.编辑模板过程 3.beforeMount、Mounted 4.beforeUpdate、Updated 5.beforeDestroy、Destroyed 二、生命周期代码 1.父子组件加载生命周期 2.父子组件更新生命周期 3.父子组件销毁生命周期 前言： 1、什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
Vue 生命周期
weixin_47227886的博客
04-14 3万+
主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② destroyed Vue实例的产生过程 ① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。...
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
Vue生命周期
啊对对对的博客
04-01 1万+
vue的生命周期 vue生命周期分为四个阶段（常用的有8个，实际上有11个） 第一阶段（创建阶段）：beforeCreate，created 相当于人一生中：准备出生之前的阶段，精子+卵子，细胞组合-十月怀胎-出生 在beforCreate之前 vue做了两件事：methos声明，生命周期钩子函数声明 在创建阶段 data数据注入，data数据劫持 1.遍历递归data选项，给每个声明式变量添加setter/getter 2.把劫持过变量都放在组件实例上
Vue3生命周期
m0_57341617的博客
08-19 11万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
vue生命周期
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
VUE生命周期
qq_48984694的博客
10-31 1011
Vue生命周期
vue 生命周期
qq_64209130的博客
05-07 1269
vue声明周期就是一个vue实例对象从创建到销毁的过程, 从创建vue , 初始化vue对象,初始化vue属性和方法 , 创建模板字符串 , 渲染页面 , 更新 , 销毁 这个过程 生命周期方法分为三大类 1.创建期间的生命周期方法 beforeCreate(创建前) created(创建后) beforeMount(挂载前) mounted(挂载后) 2.运行期间的生命周期方法 beforeUpdate(更新前) updated(更新后) 3.销毁时的生命周期方法 before.
VUE 生命周期
weixin_45628827的博客
02-23 1898
vue生命周期就是每一个vue实例从创建到销毁的过程，在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 通俗来说就是vue实列创建了，经历了一些列的事件，然后销毁了这样的过程。 一般来说vue生命周期分为8钩子函数： ...
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
Vue-Ci搭建项目
2301_78875117的博客
06-26 447
npm 是Node.js的包管理工具,用来安装各种 Node.js的扩展。vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;JavaScript 的包管理工具,也是世界上最大的软件注册表。简单的说 Node.js是一个前端js运行环境或者说是一个JS语言解释器。好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个。骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;创建 index.js 文件,在其中配置路由。其他开发人员共享的代码。
深入理解 Vue.js 中的 deep: true
weixin_42279822的博客
06-26 707
deep: truedeep: true是 Vue.js 监听器中的一个重要配置选项，允许我们递归地监听对象内部所有属性的变化。在处理复杂数据结构和需要实时同步数据的场景中，deep: true非常有用。然而，在使用时需要注意性能问题，确保在必要的场景下才使用这个选项。通过合理使用deep: true，我们可以更好地管理和响应数据的变化，提升应用的健壮性和用户体验。
vue3插槽的使用
最新发布
qq_47040462的博客
06-28 293
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
Vue下载接口返回流的处理
qq_42753983的博客
06-25 267
2.可以写公共方法处理。3-2 不需要带日期。
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值