专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容
s
.
store.dispatch() 与 this.
store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state
区别
- this.$store.commit()
同步操作
this.$store.commit('方法名',值)【存储】
this.$store.state.方法名【取值】
- this.$store.dispatch()
异步操作
this.$store.dispatch('方法名',值)【存储】
this.$store.getters.方法名【取值】
当操作行为中含有异步操作:
比如向后台发送请求获取数据,就需要使用action的dispatch去完成了。
其他使用commit即可。
commit => mutations,用来触发同步操作的方法。
dispatch =>actions,用来触发异步操作的方法。
在store中注册了mutation和action,在组件中用dispatch调用action,然后action用commit调用mutation。
实战
- this.$store.commit()
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
// state专门用来保存 共享的状态值
state: {
// 保存登录状态
login: false
},
// mutations: 专门书写方法,用来更新 state 中的值
mutations: {
// 登录
doLogin(state) {
state.login = true;
},
// 退出
doLogout(state) {
state.login = false;
}
}
});
<script>
// 使用vux的 mapState需要引入
import { mapState } from "vuex";
export default {
// 官方推荐: 给组件起个名字, 便于报错时的提示
name: "Header",
// 引入vuex 的 store 中的state值, 必须在计算属性中书写!
computed: {
// mapState辅助函数, 可以快速引入store中的值
// 此处的login代表, store文件中的 state 中的 login, 登录状态
...mapState(["login"])
},
methods: {
logout() {
this.$store.commit("doLogout");
}
}
};
</script>
<script>
export default {
name: "Login",
data() {
return {
uname: "",
upwd: ""
};
},
methods: {
doLogin() {
console.log(this.uname, this.upwd);
let data={
uname:this.uname,
upwd:this.upwd
}
this.axios
.post("user\_login.php", data)
.then(res => {
console.log(res);
let code = res.data.code;
if (code == 1) {
alert("恭喜您, 登录成功! 即将跳转到首页");
// 路由跳转指定页面
this.$router.push({ path: "/" });
//更新 vuex 的 state的值, 必须通过 mutations 提供的方法才可以
// 通过 commit('方法名') 就可以出发 mutations 中的指定方法
this.$store.commit("doLogin");
} else {
alert("很遗憾, 登陆失败!");
}
})
.catch(err => {
console.error(err);
});
}
}
};
</script>
- this.$store.dispatch()
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
const mutations = {
SET\_TOKEN: (state, token) => {
state.token = token
},
SET\_INTRODUCTION: (state, introduction) => {
### HTTP
* HTTP 报文结构是怎样的?
* HTTP有哪些请求方法?
* GET 和 POST 有什么区别?
* 如何理解 URI?
* 如何理解 HTTP 状态码?
* 简要概括一下 HTTP 的特点?HTTP 有哪些缺点?
* 对 Accept 系列字段了解多少?
* 对于定长和不定长的数据,HTTP 是怎么传输的?
* HTTP 如何处理大文件的传输?
* HTTP 中如何处理表单数据的提交?
* HTTP1.1 如何解决 HTTP 的队头阻塞问题?
* 对 Cookie 了解多少?
* 如何理解 HTTP 代理?
* 如何理解 HTTP 缓存及缓存代理?
* 为什么产生代理缓存?
* 源服务器的缓存控制
* 客户端的缓存控制
* 什么是跨域?浏览器如何拦截响应?如何解决?
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)