一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

目录

• 1.vue生命周期
• 1.0_人的-生命周期
• 1.1_钩子函数
• 1.2_初始化阶段
• 1.3_挂载阶段
• 1.4_更新阶段
• 1.5_销毁阶段
• 2.axios
• 2.0_axios基本使用
• 2.1_axios基本使用-获取数据
• 2.2_axios基本使用-传参
• 2.3_axios基本使用-发布书籍
• 2.4_axios基本使用-全局配置
• 3.nextTick和refs知识
• 3.0$refs-获取DOM
• 3.1$refs-获取组件对象
• 3.2$nextTick使用
• 3.3$nextTick使用场景
• 3.4组件name属性使用
• 4.案例-购物车
• 4.0案例-购物车-项目初始化
• 4.1案例-购物车-头部自定义
• 4.2案例-购物车-请求数据
• 4.3案例-购物车-数据渲染
• 4.4案例-购物车-商品选中
• 4.5案例-购物车-数量控制
• 4.6案例-购物车-全选功能
• 4.7案例-购物车-总数量
• 4.8案例-购物车-总价
• 面试题
• 1、Vue的nextTick的原理是什么?（高薪常问）
• 2、vue生命周期总共分为几个阶段？（必会）
• 3、第一次加载页面会触发哪几个钩子函数？（必会）
• 写在最后

1. vue生命周期

1.0_人的-生命周期

一组件从 创建 到 销毁 的整个过程就是生命周期

Vue_生命周期

1.1_钩子函数

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

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

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类: 4大阶段8个方法

• 初始化
• 挂载
• 更新
• 销毁

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

官网文档

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

1.2_初始化阶段

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

含义讲解:

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

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

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

​ 没有. 调用$mount()方法

​ 有, 继续检查template选项

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

App.vue - 引入使用

1.3_挂载阶段

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

含义讲解:

1.template选项检查

​ 有 - 编译template返回render渲染函数

​ 无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

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

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

5.真实DOM挂载完毕

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

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

1.4_更新阶段

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

含义讲解:

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

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

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

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

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

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

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

1.5_销毁阶段

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

含义讲解:

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

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

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

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

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

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

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

销毁组件

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

2.2_axios基本使用-传参

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

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

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

效果:

例子如下:

components/UseAxios.vue

2.3_axios基本使用-发布书籍

目标: 完成发布书籍功能

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

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

效果:

例子如下:

components/UseAxios.vue

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. nextTick和refs知识

3.0 $refs-获取DOM

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

components/More.vue

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

3.1 $refs-获取组件对象

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

components/Child/Demo.vue

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

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

3.2 $nextTick使用

Vue更新DOM-异步的

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

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

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

3.3 $nextTick使用场景

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

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

components/Tick.vue

3.4 组件name属性使用

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

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

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

components/Com.vue

App.vue - 注册和使用

4. 案例 - 购物车

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

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

vue create shopcar
yarn add bootstrap
yarn add less [email protected] -D

图示:

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

• MyHeader组件
• MyFooter组件
• MyGoods组件 - 商品
• MyCount组件

然后引入到App.vue上注册

在main.js中引入bootStrap库

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

MyHeader.vue

MyGoods.vue

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

components/MyCount.vue

components/MyFooter.vue

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

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

思路

1. 在MyHeader.vue中准备props里变量, 然后使用
2. 在使用MyHeader.vue组件时, 传入相应的值 (color和backgroundColor)

MyHeader.vue

App.vue传入相应自定义的值

总结:

props: [] - 只能声明变量和接收, 不能类型校验

props: {} - 声明变量和校验类型规则 - 外部传入值不对则报错

4.2 案例-购物车-请求数据

目标: 使用axios把数据请求回来

数据地址: https://www.escook.cn/api/cart (get方式)

下载axios

yarn add axios

main.js - 原型上挂载

// 目标: 请求数据 - 打印
// 1. 下载axios库, main.js - 全局绑定属性 (确保任意.vue文件可以都访问到这个axios方法)
import axios from 'axios'
// 2. 基础地址
axios.defaults.baseURL = "https://www.escook.cn"
// 3. axios方法添加到Vue的原型上
Vue.prototype.$axios = axios

new Vue({
    render: h => h(App),
}).$mount('#app')

App.vue请求使用

总结: 利用axios, 调用接口, 把数据请求回来

4.3 案例-购物车-数据渲染

目标: 把上面请求的数据, 铺设到页面上

App.vue

MyGoods.vue

MyCount.vue

总结: 把各个组件关联起来, 把数据都铺设到页面上

4.4 案例-购物车-商品选中

问题: 点击发现总是第一个被选中

原来id和for都是"input"

但是id是唯一的啊, 所以用数据的id来作为标签的id, 分别独立, 为了兼容label点击图片也能选中的效果

总结: lable的for值对应input的id, 点击label就能让对应input处于激活

4.5 案例-购物车-数量控制

目标: 点击+和-或者直接修改输入框的值影响商品购买的数量

4.6 案例-购物车-全选功能

目标: 在底部组件上, 完成全选功能

思路:

点击获取它的选中状态同步给上面每个小选框 - 而小选框的选中状态又在数组里把数组传给MyFooter, 然后更新即可 - 因为对象都是引用关系的

MyFooter.vue

App.vue

总结: 全选的v-model的值, 使用计算属性完整写法

4.7 案例-购物车-总数量

目标: 完成底部组件, 显示选中的商品的总数量

MyFooter.vue

allCount(){
    return this.arr.reduce((sum, obj) => {
        if (obj.goods_state === true) { // 选中商品才累加数量
            sum += obj.goods_count;
        }
        return sum;
    }, 0)
},

总结: 对象之间是引用关系, 对象值改变, 所有用到的地方都跟着改变

4.8 案例-购物车-总价

目标: 完成选中商品计算价格

components/MyFooter.vue

allPrice(){
      return this.arr.reduce((sum, obj) => {
        if (obj.goods_state){
          sum += obj.goods_count * obj.goods_price
        }
        return sum;
      }, 0)
    }

总结: 把数组传给了MyFooter组件, 统计总价

面试题

1、Vue 的 nextTick 的原理是什么? （高薪常问）

​ \1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

​ \2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

​ \3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

2、vue生命周期总共分为几个阶段？（必会）

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1**）beforeCreate**

​ 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2**）created**

​ 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3**）beforeMount**

​ 在挂载开始之前被调用：相关的 render 函数首次被调用。

4**）mounted**

​ el 被新创建的 vm. e l 替 换 ， 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 ， 当 m o u n t e d 被 调 用 时 v m . el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm. el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。

5**）beforeUpdate**

​ 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6**）updated**

​ 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7**）activated**

​ keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8**）deactivated**

​ keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9**）beforeDestroy**

​ 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10**）destroyed**

​ Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11**）errorCaptured（2.5.0+ 新增）**

​ 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

3、第一次加载页面会触发哪几个钩子函数？（必会）

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

写在最后

到此这篇关于一篇文章带你吃透Vue生命周期的文章就介绍到这了,更多相关Vue生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！