ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
-
4.5 案例-购物车-数量控制
-
4.6 案例-购物车-全选功能
-
4.7 案例-购物车-总数量
-
4.8 案例-购物车-总价
-
面试题
-
- 1、Vue 的 nextTick 的原理是什么? （高薪常问）
-
2、vue生命周期总共分为几个阶段？（必会）
-
3、第一次加载页面会触发哪几个钩子函数？（必会）
-
写在最后
-
掌握vue组件生命周期
-
掌握axios的使用
-
了解$refs, $nextTick使用和name使用
-
能够完成购物车案例开发
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. 生命周期
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 - 创建一个文件
学习生命周期 - 看控制台打印
{{ 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.0_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.0 案例-购物车-项目初始化
目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块
vue create shopcar
yarn add bootstrap
yarn add less less-loader@5.0.0 -D
图示:
- 按照需求, 把项目页面拆分成几个组件, 在components下创建
-
MyHeader组件
-
MyFooter组件
-
MyGoods组件 - 商品
-
MyCount组件
-
然后引入到App.vue上注册
-
在main.js中引入bootStrap库
import “bootstrap/dist/css/bootstrap.css” // 引入第三方包里的某个css文件
MyHeader.vue
购物车案例MyGoods.vue
<input type=“checkbox” class=“custom-control-input” id=“input”
商品名字¥ 100
数量组件
-
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
