前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
//返回 count 的 2 倍数据
countDouble(state){
return state.count*2
}
}
})
//组件中引用
//运行结果
获取countDouble:4
此处,$store.getters.countDouble 的使用与上边的 $store.state.count 是一样的。
2》getters 中返回的变异结果,依赖于某个 getters 中属性返回结果
export default new Vuex.Store({
state:{
count:2,
},
getters:{
//返回 count 的 2 倍数据
countDouble( state ){
return state.count * 2
}
//返回 countDouble 的 2 倍数据
countDoubleT( state , getters ){
return getters.countDouble * 2
}
}
})
//组件中引用
//运行结果
获取countDouble:8
3.3、mutations
vuex 的store 状态的更新唯一方式:提交 Mutation。
Mutations 主要包括两部分:
-
字符串的事件类型
-
一个回调函数,该回调函数的第一个参数就是 state。
1》、mutation 中的方法通过 commit 调用,不传参数使用:
export default new Vuex.Store({
state:{
count:2,
},
mutations:{
incrs(state){
// count 加 1
state.count++
}
}
})
//组件调用
<button @click=" $store.commit(‘incrs’) " >+
{{$store.state.count}}
按钮每点一次,count 就会自加一次。
2》mutations 传递参数
我们点击加按钮时,指定每次点击增加的数值,如下:
export default new Vuex.Store({
state:{
count:2,
},
mutations:{
addNum( state,n ){
// count 加 1
state.count +=n
}
}
})
//组件调用
<button @click=" $store.addNum( ‘incrs’ , 5 ) " >+
{{$store.state.count}}
//运行结果
每点一次按钮,count 增加 5
上个实例传递的是一个参数,如果我们需要传递多个参数时,该如何实现呢?
3》mutations 传递多个参数
export default new Vuex.Store({
state:{
count:2,
},
mutations:{
addNum(state,payload){
// payload 是传递过来的参数对象
state.count += payload.count
}
}
})
//组件调用
<button @click=“addTen” >加10
{{$store.state.count}}
export default{
methods:{
addTen(){
this.$store.commit({
type:‘addNum’,
count:10,
…//可以传任意多个参数
})
}
}
}
//运行结果
每点一次按钮,count 增加 10
上述方法是 mutations 特殊的提交封装。包含了 type 属性的对象,将整个 commit 的对象作为 payload 使用。
3.4、actions
mutations 提交更新数据的方法,必须是同步的,如果是异步使用就会出现问题,然后在项目开发中往往就会用到异步更新,比如网路请求数据。
actions 是类似于 mutation,功能大致相同,但是 actions 是用来替代 mutations 进行异步操作的。
1》actions 的基本使用
actions:{
aUpdateCount(context){
setTimeout(()=>{ //使用定时器模拟异步操作
context.commit(‘updateCount’)
},2000)
}
},
mutations:{
updateCount(state){
state.count = 5201314
},
}
// 组件内使用
{{$store.state.count}}
<button @click=“$store.dispatch(‘aUpdateCount’)”>异步更新count
//运行结果
点击按钮,两秒后更新 count 值为5201314
值得注意的是,使用 actions 异步更新数据的时候,还是需要经过 mutations 中的方法,state 中的数据只能由 mutations 中的方法修改。
调用 mutations 中的方法,使用 commit 调用。
调用 actions 中的方法,使用 dispatch 调用。
2》异步更新的时候,也可以带参数
// 功能:点击按钮,指定 count 修改的值
actions:{
aUpdateCount( context, payload ){
setTimeout(()=>{ //使用定时器模拟异步操作
context.commit( ‘updateCount’ , payload )
},2000)
}
},
mutations:{
updateCount( state , payload ){
state.count = payload
},
}
// 组件内使用
{{$store.state.count}}
<button @click=“$store.dispatch( ‘aUpdateCount’, ‘我爱前端’ )”>异步更新count
//运行结果
点击按钮,两秒后更新 count 值为: 我爱前端
3》传入异步参数
actions:{
//传入promise
updateData(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(‘我学会了’)
},2000)
})
},
}
//组件内调用
<button @click=“ok”>promise执行成功,返回"我学会了"
methods:{
ok(){
this.$store.dispatch(‘updateData’).then((res)=>{
console.log(res)
})
},
}
//运行结果
点击按钮,两秒后打印:我学会了
3.5、modules
modules 是模块的意思,vue 使用单一状态树,项目越来越大,store 中的数据越来越多,不便于数据的管理和维护,代码也会变得臃肿。因此使用 modules ,把数据划分到对应的某个模块,既便于开发,也提高代码的可读性。
1》modules 简单使用
import Vue from ‘vue’
import Vuex from ‘vuex’
import { Increase } from ‘./mutation_type.js’
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
actions: {},
getters: { },
mutations: { },
modules:{
a:{
state:{},
getters:{},
mutations:{},
actions:{}
},
b:{
state:{},
getters:{},
mutations:{},
actions:{}
}
},
})
//也可以整理为
const moduleA = {
state:{},
getters:{},
mutations:{},
actions:{}
}
const moduleB = {
state:{},
getters:{},
mutations:{},
actions:{}
}
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
actions: {},
getters: { },
mutations: { },
modules:{
a: moduleA,
b: moduleB
},
})
2》模块中的数据如何使用呢?
const moduleA = {
state:{
aName:‘我是模块a的数据’
},
getters:{},
mutations:{},
actions:{}
}
// 组件内引用
{{ $store.state.a.aName }}
3》调用模块内的 mutations 中的方法,如何调用呢?
$store.commit(‘aChangeName’)
调取模块内的 mutations 中的方法,与之前是一模一样的,程序会先从第一层 store 中查找方法,找不到方法时会继续去模块中查找。
4》调用模块内的 getters 内方法
$store.getters.getName
需要注意的是,getters 中方法都是对 state 中数据变异,如果模块的 getters 方法需要根 store 中的 state 呢?
getName(state,getters , rootState){
// state 表示当前模块的 state
// getters表示当前模块的getters
//rootState 表示根 store 内的state
}
5》模块内的 actions 中的方法,使用 commit 调用 mutations 中方法时,只能调用本模块内的 mutations 方法,不能调用外层的。
四、Vuex 数据响应原理
Vuex 的 store 中的 state 是响应式的,当 state 中数据发生改变时,vue 组件会自动更新。这就要求我们必须遵守一些vuex对应的规则:
提前在 store 中初始化好所需的属性。
说人话,就是必须在state中定义的属性才能做到响应式,如果是后加或删除的,无法做到响应式。
举个栗子:
mutations:{
changeName(state){
state.info.name = ‘爱学习的前端人’
},
addAdrs(state){
state.info[‘address’] = “陕西西安”
},
}
{{this.$store.state.info}}
<button @click=“$store.commit(‘changeName’)”>修改姓名
<button @click=“$store.commit(‘addAdrs’)”>增加地址
此时点击修改姓名的时候,可以做到响应式,而点击“增加地址”按钮时,页面没有任何反应,但是在开发者模式中可以看到数据有变化。
我们要响应式,该如何实现呢?
文末
逆水行舟不进则退,所以大家要有危机意识。
同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总