2024年最全一文带你吃透Vue生命周期（结合案例通俗易懂），前端程序员必经的实践之路

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

components/Life.vue - 创建一个文件

学习生命周期 - 看控制台打印

{{ msg }}

1.4_更新阶段

目标: 掌握更新阶段2个钩子函数作用和执行时机

含义讲解:

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

components/Life.vue - 创建一个文件

准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始

学习生命周期 - 看控制台打印

{{ msg }}

• {{ val }}

  <button @click=“arr.push(1000)”>点击末尾加值

  1.5_销毁阶段

  目标: 掌握销毁阶段2个钩子函数作用和执行时机

  含义讲解:

  1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

  2.beforeDestroy – 生命周期钩子函数被执行

  3.拆卸数据监视器、子组件和事件侦听器

  4.实例销毁后, 最后触发一个钩子函数

  5.destroyed – 生命周期钩子函数被执行

  

  components/Life.vue - 准备生命周期方法(Life组件即将要被删除)

  主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段

  <button @click=“show = false”>销毁组件

  2. axios

  ---

  2.0_axios基本使用

  axios文档

  特点

  • 支持客户端发送Ajax请求

  • 支持服务端Node.js发送请求

  • 支持Promise相关用法

  • 支持请求和响应的拦截器功能

  • 自动转换JSON数据

  • axios 底层还是原生js实现, 内部通过Promise封装的

  axios的基本使用

  axios({

  method: ‘请求方式’, // get post

  url: ‘请求地址’,

  data: { // 拼接到请求体的参数, post请求的参数

  xxx: xxx,

  },

  params: { // 拼接到请求行的参数, get请求的参数

  xxx: xxx

  }

  }).then(res => {

  console.log(res.data) // 后台返回的结果

  }).catch(err => {

  console.log(err) // 后台报错返回

  })

  2.1_axios基本使用-获取数据

  目标: 调用文档最后_获取所有图书信息接口

  功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

  接口: 参考预习资料.md – 接口文档

  引入: 下载axios, 引入后才能使用

  效果:

  

  例子如下:

  components/UseAxios.vue

  1. 获取所有图书信息

  <button @click=“getAllFn”>点击-查看控制台

  2.2_axios基本使用-传参

  目标: 调用接口-获取某本书籍信息

  功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台

  接口: 参考预习资料.md – 接口文档

  效果:

  

  例子如下:

  components/UseAxios.vue

  2. 查询某本书籍信息

  <button @click=“findFn”>查询

  2.3_axios基本使用-发布书籍

  目标: 完成发布书籍功能

  功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台

  接口: 参考预习资料.md – 接口文档

  效果:

  

  例子如下:

  components/UseAxios.vue

  3. 新增图书信息

  <button @click=“sendFn”>发布

  2.4_axios基本使用-全局配置

  目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置

  axios.defaults.baseURL = “http://123.57.109.30:3006”

  // 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面

  getAllFn() {

  axios({

  url: “/api/getbooks”,

  method: “GET”, // 默认就是GET方式请求, 可以省略不写

  }).then((res) => {

  console.log(res);

  });

  // axios()-原地得到Promise对象

  },

  3. n e x t T i c k 和 nextTick和 nextTick和refs知识

  ---

  3.0 $refs-获取DOM

  目标: 利用 ref 和 $refs 可以用于获取 dom 元素

  components/More.vue

  1. 获取原生DOM元素

  我是一个孤独可怜又能吃的h1

  总结: 通过id / ref, 都可以获取原生DOM标签

  3.1 $refs-获取组件对象

  目标: 获取组件对象, 调用组件里方法

  components/Child/Demo.vue

  我是Demo组件

  More.vue - 获取组件对象 - 调用组件方法

  1. 获取原生DOM元素

  我是一个孤独可怜又能吃的h1

  2. 获取组件对象 - 可调用组件内一切

  总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量

  3.2 $nextTick使用

  Vue更新DOM-异步的

  目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值

  components/Move.vue - 继续新增第三套代码

  1. 获取原生DOM元素

  我是一个孤独可怜又能吃的h1

  2. 获取组件对象 - 可调用组件内一切

  3. vue更新DOM是异步的

  {{ count }}

  <button @click=“btn”>点击count+1, 马上提取p标签内容

  总结: 因为DOM更新是异步的

  3.3 $nextTick使用场景

  目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失

  ![ n e x t T i c k 使 用 ] ( i m a g e s / nextTick使用](images/ nextTick使用](images/nextTick使用.gif)

  components/Tick.vue

  <button v-else @click=“btn”>点击我进行搜索

  3.4 组件name属性使用

  目标: 可以用组件的name属性值, 来注册组件名字

  问题: 组件名不是可以随便写的?

  答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

  components/Com.vue

  我是一个Com组件

  App.vue - 注册和使用

  1. 生命周期

  <button @click=“show = false”>销毁组件

  ---

  2. axios使用

  ---

  3. $refs的使用

  ---

  4. $nextTick使用场景

  ---

  5. 组件对象里name属性

  4. 案例 - 购物车

  ---

  

  4.0 案例-购物车-项目初始化

  目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块

  vue create shopcar

  yarn add bootstrap

  yarn add less less-loader@5.0.0 -D

  图示:

  

  1. 按照需求, 把项目页面拆分成几个组件, 在components下创建

  • MyHeader组件

  • MyFooter组件

  • MyGoods组件 - 商品

  • MyCount组件

  2. 然后引入到App.vue上注册

  3. 在main.js中引入bootStrap库

  import “bootstrap/dist/css/bootstrap.css” // 引入第三方包里的某个css文件

  MyHeader.vue

  购物车案例

  MyGoods.vue

  <input type=“checkbox” class=“custom-control-input” id=“input”

  
  商品名字

  ¥ 100

  数量组件

  目标: 完成商品组件右下角商品组件的开发

  

  components/MyCount.vue

  -

  +

  components/MyFooter.vue

  全选

  合计:

  ¥ 0

  结算 ( 0 )

  4.1 案例-购物车-头部自定义

  目的: 头部的标题, 颜色, 背景色可以随便修改, props类型的校验

  思路

  1. 在MyHeader.vue中准备props里变量, 然后使用

  2. 在使用MyHeader.vue组件时, 传入相应的值 (color和backgroundColor)

  MyHeader.vue

  {{ title }}

  4.1 案例-购物车-头部自定义

  目的: 头部的标题, 颜色, 背景色可以随便修改, props类型的校验

  思路

  1. 在MyHeader.vue中准备props里变量, 然后使用

  2. 在使用MyHeader.vue组件时, 传入相应的值 (color和backgroundColor)

  MyHeader.vue

  {{ title }}