2022.9.23 BaiWang初试
1、js遍历对象的方法
- for … in obj
使用for in会遍历对象的所有属性
for…in的特性de 一个问题,其继承的属性会被遍历到,所以当我们不想要遍历被继承的属性,那么我们就可以使用Object.keys() - Object.keys(obj),Object.values(obj)
obj:要返回其枚举自身属性的对象
返回值:
Object.keys(obj):一个表示给定对象的所有可枚举属性的字符串数组。
Object.values(obj):一个表示给定对象的所有可枚举属性所对应的值得字符串数组。
const obj = {
id:1,
name:'zhangsan',
age:18
}
console.log(Object.keys(obj))//['id','name','age']
console.log(Object.values(obj))//['1','zhangsan','18']
3.Object.entries()
Object.entries()的返回值为Object.values()与Object.keys()的结合,也就是说它会返回一个嵌套数组,数组内包括了属性名与属性值
let obj = {
name:"lisi",
age:10
}
Object.entries(obj) // [['name', 'lisi'],['age', 10]]
- Object.getOwnPropertyNames(obj,name)
参数:一个是指定对象,一共是指定对象的某属性。
如果传两个参数,那么返回属性对应的enumerable
的值,true||false
返回一个数组,包含对象自身的所有属性(包含不可枚举属性)
遍历可以获取key和value
const obj = {
id:1,
name:'zhangsan',
age:18
}
Object.getOwnPropertyNames(obj).forEach(function(key){
console.log(key+ '---'+obj[key])
})
2、js事件循环
这里考察的是EventLoop
- js是单线程语言,但是在处理一些操作时可能会堵塞或出现一些问题,比如如果同时对同一个Dom节点进行添加和删除操作,那么就会出现问题,我该听谁的,具体怎么操作?
- 所以js把任务分为同步任务和异步任务,当开始执行时,所有的同步任务会放在主线程中依次执行,异步任务则放入任务队列中,当执行完所有的同步任务,会从任务队列中取异步任务来执行,执行完之后再取,再执行,循环往复的过程被称为时间循环。
- 异步任务分为宏任务和微任务,具体执行顺序可看这篇博客,讲的很详细
3、js操作DOM节点的方法
4、vue2和vue3的区别?是否打印过vue2中的data()?
- 数据绑定原理不同,vue2采用Object.definePropety(),vue3采用proxy
- 生命周期不同
vue2 | vue3 |
---|---|
beforeCreate | setUp |
created | setUp |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestory | onBeforeUnmount |
destoryed | onUnmount |
- 数据定义方式不一样
- API不同,vue3有很多组合API
5、vue路由懒加载
整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。
按需去加载路由对应的资源,提高首屏加载速度(tip:首页不用设置懒加载,而且一个页面加载过后再次访问不会重复加载)
实现原理:将路由相关的组件,不再直接导入了,而是改写成异步组件的写法,只有当函数被调用的时候,才去加载对应的组件内容
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: () => import('@/views/login/index.vue') },
{ path: '/home', component: () => import('@/views/home/home.vue') }
]
export default router
6、vue 路由常用那种,hash路由原理?
history和hash
hash:核心是onhashChange
window.onhashchange = function () {
console.log(666);
// 获取当前hash值
jump();
}
function jump() {
const hash = window.location.hash.slice(1); // #/home
let currentRouter = routes.filter(item => item.path === hash)[0]
if (!currentRouter) {
如果hash地址在路由表没有哦就直接跳到/notfound页面
currentRouter = routes.filter(item => item.path === '/notfound')[0]
location.hash = currentRouter.path;
}
app.innerHTML = currentRouter.component
}
7、vuex 如何更改state?vuex如何调用action里的方法或者mutations里的方法?
更改state有两种:
- 直接更改:this.$store.helloWorld =10 不建议
- 通过mutations去修改,现在mutations中定义修改count的方法,然后在页面中通过 this.$store.commit('SET_HW', '你好世界')修改
export default new Vuex.Store({
store : {
helloWorld : 'Hello World!'
},
mutations : {
//在这里定义修改helloWorld的方法,到时候调用SET_HW就可以修改了
SET_HW (str) {
this.helloWorld = str
}
}
})
methods : {
//这里我们新建一个函数给组件调用
onClick () {
//第一个参数为mutations中定义的函数,第二个参数为该函数的参数
//如果有多个参数需要传递可以使用对象{}
this.$store.commit('SET_HW', '你好世界')
}
vuex如何调用action里的方法或者mutations里的方法
如果只有一个vuex模块,通过commit条用mutations的方法,通过dispatch条用action中的方法
- dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值)
- commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)
还有一种方法就是用vue辅助函数mapactions,mapmutations,通过这两个方法把方法先引进来,然后直接调用。辅助函数使用方法
import { mapActions } from "vuex";
methods: {
...mapActions([
"SET_CURRENT_INFO"
])
}
methods: {
setCurrentInfo() {
this.SET_CURRENT_INFO("xxx");
}
}
8、vuex模块化,如何拿到某一个模块里的数据
如果vuex划分module,那么我们在拿取某一模块的数据或方法时,需要
...mapState('moduleA', ['dataA']),
...mapMutations('moduleA', [
handleDataA:'handleDataA', // 或者 'handleDataA'
]),
// Actions
...mapActions('moduleA', ['_todoA']), // this._todoA();
如果我们想在vuex的某个模块中调用另一个模块的数据或方法,可以这样
actions: {
async _todoB({commit, dispatch, state, rootState,getters }, payload) {
// 调用state:
console.log(rootState) // 打印根 state
console.log(rootState.dataA) // 打印其他模块的 state
// 调用actions:
// 第一个参数是其他模块的 actions 路径, 第二个是传给 actions 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 acitons 不是当前模块的
dispatch('moduleA/_todoA',{},{root:true}) // 调用其他模块的 actions
dispatch('rootActions',{},{root:true}) // 调用根模块的 actions
//调用mutations
commit('moduleA/handleDataA',{},{root:true}) // 调用其他模块的 mutations
commit('rootMutations',{},{root:true}) // 调用根模块的 mutations
console.log(rootGetters['moduleA/gettersFn']) // 打印其他模块的 getters
},
},
9、rem,当页面缩放时,px会不会发生变化,如何计算rem
当页面缩放时,px不会变化,
设计稿尺寸和当前尺寸计算一下得比例,可计算出rem
参考链接
10、vue项目搭建过程,vue3项目搭建过程遇到的问题
node-sass,sass-loader,css-loader兼容问题,vue3和vue2兼容问题
很多报错,一点一点解决
11、输出题
241123
2022.9.26 baiwang二面
1.说一下http,http版本区别,根据不同版本做过什么
2.cdn原理
3.有没有做过前端安全的处理,前端加密,加密原理
4.前端微服务
5.node了解到什么程度
6.有没有部署过项目,或者开发过后端内容
7.vue3有没有看过源码,
2022.10.28
- vue如何抽离组件
- vuex刷新数据消失如何解决
- 利用locationStorage,当vuex值变化时,F5刷新页面,vuex数据重置为初始状态,要用到localStorage
- 插件vuex-persistedstate vuex-persistedstate默认持久化所有state,可以指定需要持久化的state
- vue如何做性能优化
1、合理使用v-if和v-show,
2.合理使用computed,
3.v-for加key,
4.自定义事件,dom事件及时销毁,
5.合理使用异步组件,
6.合理使用keepalive,
7.data层级不要太深,
8.使用vue-loader在开发环境做模板编译,
9.前端通用性能优化(如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名),
10.使用ssr
- 自己解决过得浏览器兼容问题
- 不同浏览器margin和padding不同(*{margin: 0; padding: 0;})
- IE9以下浏览器不能使用opacity({opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。)
- js事件对象兼容:e=e||window.e
- 阻止事件冒泡:if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }
- 阻止默认行为的兼容:if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }
- 添加事件监听的兼容:if (target.addEventListener) { target.addEventListener(“click”, fun, false); } else { target.attachEvent(“onclick”, fun); }
- bfc是什么
- 事件三要素
- vue项目搭建过程,需要处理哪些问题
1、准备环境:node,vue,git
2、安装,自定义配置,路由,vue版本,eslient校验,等等
3、安装需要的依赖:sass-loader,node-loader等等,rem-loader配置,axios
4、配置vue.config.js入口出口文件,devServer等
5、配置eslintrc.js
6、配置路由,引入文件,分配模块,封装axios