Vue生命周期-核心问题

01_vue的生命周期

问题

  1. Vue的生命周期是什么?

答案

  1. Vue的生命周期是什么?
    1. 从Vue实例, 创建到销毁的过程

02_vue的钩子函数

问题

  1. 如何知道Vue生命周期到达了什么阶段?
  2. 钩子函数有哪些?

答案

  1. 如何知道Vue生命周期到达了什么阶段?
    1. 使用钩子函数
  2. 钩子函数有哪些?
    1. 初始化/ 挂载/ 更新/ 销毁

03_钩子函数_初始化阶段

问题

  1. Vue实例从创建到编译模板执行了哪些钩子函数?
  2. created函数触发能获取data?

答案

  1. Vue实例从创建到编译模板执行了哪些钩子函数?
    1. beforeCreate / created
  2. created函数触发能获取data?
    1. 能获取data, 不能获取真实DOM

==练习时间：3m==

04_钩子函数_挂载阶段

问题

  1. Vue实例从创建到显示都经历了哪些钩子函数?
  2. created函数里, 能获取真实DOM吗?
  3. 在什么钩子函数里可以获取真实DOM?

答案

  1. Vue实例从创建到显示都经历了哪些钩子函数?
    1. beforeCreate / created / beforeMount / mounted
  2. created函数里, 能获取真实DOM吗?
    1. 不能获取真实DOM
  3. 在什么钩子函数里可以获取真实DOM?
    1. mounted

==练习时间：3m==

05_钩子函数_更新阶段

问题

  1. 什么时候执行updated钩子函数?
  2. 在哪可以获取更新后的DOM?

答案

  1. 什么时候执行updated钩子函数?
    1. 当数据发生变化并更新页面后
  2. 在哪可以获取更新后的DOM?
    1. 在updated钩子函数里

06_钩子函数_销毁阶段

问题

  1. 一般在beforeDestroy/destroyed里做什么?

答案

  1. 一般在beforeDestroy/destroyed里做什么?
    1. 手动消除计时器/定时器/全局事件

==练习时间：3m==

07_axios的介绍

问题

  1. 什么是ajax?
  2. ajax原理?
  3. axios是什么?

答案

  1. 什么是ajax?
    1. 一种前端异步请求后端的技术
  2. ajax原理?
    1. 浏览器window接口的XMLHttpRequest
  3. axios是什么?
    1. 基于原生ajax+Promise技术封装通用于前后端的请求库

08_axios_获取所有图书_get请求

问题

  1. axios如何发起一次get请求?
  2. axios函数调用原地结果是什么?
  3. 如何拿到Promise里ajax的成功或失败的结果?

答案

  1. axios如何发起一次get请求?
    1. 在method选项配置为true / 也可以默认不写
  2. axios函数调用原地结果是什么?
    1. 是一个Promise对象
  3. 如何拿到Promise里ajax的成功或失败的结果?
    1. then() / catch()

09_axios_获取某本图书_get传参

问题

  1. ajax如何给后台传参?
  2. axios哪个配置项会把参数自动写到url?后面

答案

  1. ajax如何给后台传参?
    1. 在url?拼接–查询字符串
    2. 在url路径上–需要后端特殊处理
    3. 在请求体/ 请求头传参给后台
  2. axios哪个配置项会把参数自动写到url?后面
    1. params

==练习时间：3m==

10_axios_添加书籍_post传参

问题

  1. post请求方式, 一般在哪里传递数据给后台?
  2. axios哪个选项, 可以把参数自动装入到请求体中?
  3. axios默认发给后台请求体数据格式是?

答案

  1. post请求方式, 一般在哪里传递数据给后台?
    1. 请求体中
  2. axios哪个选项, 可以把参数自动装入到请求体中?
    1. data选项
  3. axios默认发给后台请求体数据格式是?
    1. json字符串格式

==练习时间：3m==

11_axios_全局默认配置基地址

问题

  1. 想学习axios更多的知识应该去哪里?
  2. axios如何配置基地址?

答案

  1. 想学习axios更多的知识应该去哪里?
    1. 官网多阅读, 多看多总结, 任何库和插件都是
  2. axios如何配置基地址?
    1. axios.defaults.baseURL

12_ref获取原生DOM元素

问题

  1. Vue中如何获取原生DOM呢?

答案

  1. Vue中如何获取原生DOM呢?
    1. 用id属性或者ref属性都可以

13_ref属性_组件对象

问题

  1. 如何获取组件对象呢?
  2. 拿到组件对象能做什么?

答案

  1. 如何获取组件对象呢?
    1. 目标组件添加ref属性
    2. this.$refs.名字获取组件对象
  2. 拿到组件对象能做什么?
    1. 调用组件里的属性/方法

==练习时间：3m==

14_nextTick基础使用

问题

  1. data改变更新DOM是同步还是异步的?
  2. 我们可以在哪里访问到更新后的DOM呢?

答案

  1. data改变更新DOM是同步还是异步的?
    1. 异步
  2. 我们可以在哪里访问到更新后的DOM呢?
    1. this.$nextTick里的函数体
    2. updated生命周期钩子函数

15_nextTick使用场景

问题

  1. $nextTick函数原地返回什么?
  2. 如何在JS中主动触发标签的事件呢?

答案

  1. $nextTick函数原地返回什么?
    1. Promise对象
  2. 如何在JS中主动触发标签的事件呢?
    1. 获取到DOM对象, 调用事件方法

==练习时间：3m==

16_组件里name属性作用

问题

  1. 组件使用分为几步?
  2. 注册组件名还可以用什么?

答案

  1. 组件使用分为几步?
    1. 创建组件/ 引入组件/ 注册组件/ 使用组件
  2. 注册组件名还可以用什么?
    1. 用组件对象的name属性的值

17_购物车案例_项目初始化

问题

  1. 拿到项目需求–做什么?

答案

  1. 拿到项目需求–做什么?
    1. 新建项目-下载需要的包
    2. 分析, 拆分, 创建组件
    3. 准备静态标签
    4. 组件使用到页面

==练习时间：30s（输入命令初始化项目）==

18_购物车案例_头部自定义

问题

  1. 封装的组件–如何能支持不同的项目需求?
  2. props有哪2种定义方式, 区别是?

答案

  1. 封装的组件–如何能支持不同的项目需求?
    1. 可以自定义props变量使用
    2. 使用组件者, 传入具体数据
  2. props有哪2种定义方式, 区别是?
    1. props: [] - 只声明变量, 不能类型校验
    2. props: {} - 声明变量和校验类型规则 - 不对则报错

==练习时间：5m==

19_购物车案例_请求数据

问题

  1. 如何从后台获取数据?
  2. 如何定义全局变量?

答案

  1. 如何从后台获取数据?
    1. 依赖axios等网络请求库
  2. 如何定义全局变量?
    1. 在Vue的原型上添加, 组件对象通过原型链可以访问

20_购物车案例_数据铺设

问题

  1. 拿到数据如何铺设页面?

答案

  1. 拿到数据如何铺设页面?
    1. 分析数据和什么标签对应
    2. 传入数据对象, 在组件内使用

==练习时间：5m==

21_购物车案例_商品选中效果

问题

  1. label标签有什么用?
  2. 对象传值赋值传的是什么?

答案

  1. label标签有什么用?
    1. 关联表单, 点击label标签上, 相当于点击表单
  2. 对象传值赋值传的是什么?
    1. 传的是引用类型的堆内存地址, 多处使用共同的这个对象/数组

==练习时间：3m==

22_购物车案例_商品数量控制

问题

  1. 子组件改变对象里属性会影响外面数组里对象否?
  2. 控制输入框值合法性?

答案

  1. 子组件改变对象里属性会影响外面数组里对象否?
    1. 会, 因为对象之间引用了相同的内存地址
  2. 控制输入框值合法性?
    1. 先控制按钮, 然后侦听输入框值, 强制覆盖

==练习时间：3m==

23_购物车案例_全选

问题

  1. 全选和小选框, 互相影响的思路是什么?

答案

  1. 全选和小选框, 互相影响的思路是什么?
    1. 全选 – 关联计算属性 – set方法 – 同步所有小选
    2. 小选 – 触发计算属性的get方法 – 统计后返回全选状态

24_购物车案例_总数量

问题

  1. 统计选中商品的总数量思路是什么?

答案

  1. 统计选中商品的总数量思路是什么?
    1. 计算属性
    2. reduce累加数组里对象数量 – 但是要加一层判断

25_购物车案例_总价

问题

  1. 统计总价如何做的?

答案

  1. 统计总价如何做的?
    1. 计算属性
    2. 统计数组里的商品数量 * 商品单价(需判断选中状态)
    3. 只要依赖项修改, 计算属性都会重新计算总价

==练习时间：7m==