一文带你吃透Vue生命周期（结合案例通俗易懂）

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 }}

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

  总结:

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

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

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

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

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

  1. 下载axios

  yarn add axios

  2. 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’)

  3. App.vue请求使用

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

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

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

  App.vue

  <MyGoods v-for=“obj in list”

  :key=“obj.id”

  :gObj=“obj”

  MyGoods.vue

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

  v-model=“gObj.goods_state”

  {{ gObj.goods_name }}

  ¥ {{ gObj.goods_price }}

  MyCount.vue

  -

  +

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

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

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

  原来id和for都是"input"

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

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

  v-model=“gObj.goods_state”

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

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

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

  <button type=“button” class=“btn btn-light” :disabled=“obj.goods_count === 1” @click=“obj.goods_count > 1 && obj.goods_count–”>-

  <button type=“button” class=“btn btn-light” @click=“obj.goods_count++”>+

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

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

  

  思路:

  1. 点击获取它的选中状态

  2. 同步给上面每个小选框 - 而小选框的选中状态又在数组里

  3. 把数组传给MyFooter, 然后更新即可 - 因为对象都是引用关系的

  MyFooter.vue

  全选

  合计:

  ¥ {{ allPrice }}

  结算 ( {{ allCount }} )

  App.vue

  <MyFooter @changeAll=“allFn” :arr=“list”>

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

  4.7 案例-购物车-总数量

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

  MyFooter.vue

  allCount(){