admin管理员组文章数量:1588254
文章目录
- 一、vue3.0篇
- 二、vue2.0篇
- 1. vue生命周期?
- 2. vuex是什么?以及组件传值?
- 3.vue中自定义指令如何使用?
- 4. 自定义指令的生命周期
- 5. vue中的过滤器如何使用?
- 6.组件通信?
- 1. 父子组件之间传值(六种方式)
- - 子组件$emit触发,父组件on监听
- - 父组件设置属性传,子组件通过props接收
- - this. p a r e n t 和 t h i s . parent和this. parent和this.children也可以获取到子组件的值
- - 父组件provide提供变量 子组件inject注入需要的数据
- - $ attrs、$listeners
- - slot插值传值
- 2. 非父子组件(两种方式)
- - Vuex,commit进仓库,然后使用getters获取
- - 公共bus
- 7. 请解释一下vue中的单向数据流的理解?
- 8. 请说什么是动态组件,如何使用,以及keep-alive的作用
- 9. 第一次页面加载会触发哪几个钩子?
- 10.简述每个周期具体适合哪些场景
- 11.$nextTick的使用
- 12.assets和static的区别?
- 13.vue常用的修饰符
- 14.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
- 15. v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
- 16.Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
- 17.你知道vue中key的作用和工作原理吗?说说你对它的理解。
- 18.你怎么理解vue中的diff算法?
- 19. 谈一谈对vue组件化的理解?
- 20. 谈一谈对vue设计原则的理解?
- 21. 你了解哪些Vue性能优化方法?
- 22. 单页面应用和多页面应用区别及优缺点
- 23. 父子组件之间的生命周期顺序
- 24. vue中组件创建的方式有哪些?
- 25. 在Vue中怎么添加一个超链接?
- 26. Vue中EventBus的实现
- 27. vue组件的全局注册和局部注册
- 28.vue数据双向绑定的原理(2.0和3.0)
- 29. 虚拟doms
- 30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
- 31. 路由守卫
- - 全局钩子有beforeEach、beforeResolve(2.5后新增)、afterEach
- - 单个路由独享beforeEnter
- - 组件路由守卫:beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave
- 32. vue如何引入第三方库,比如jquery?
- 33. vue要做权限管理该怎么做,如果控制到按钮级别的权限该怎么做?
- 34. vue和jQuery的区别
- 35. 引进组件的步骤
- 36. slot
- 37. MVVM模式和MVM模式
- 38. Vue监听键盘事件
- 39.Watch怎么深度监听对象变化
- 40.Vue路由实现的原理?
- 2.history
- 41.Vue的路由如何传参?以及params和query的区别?
- 42.关于Vue的优缺点,你知道哪些?
- 43.vue中使用mixins
- 44.组件化和模块化的区别?
- 45.vue数据丢失的4中情况&解决方法
- 三、axios请求
- 1.axios的特点有哪些?
- 2. axios有哪些常用方法?
- 3. 封装axios
- 四、AJAX
- 1.什么是ajax?
- 2.ajax轮询?
- 四、ES5
- 五、ES6
- 六、ES7
- - Array.prototype.includes()
- - 求幂运算Math.pow(3, 2)
- 七、ES8
- 1.async await
- 2.Object.entries()和Object.values()
- - Object.entries()
- - Object.values()返回键值中的值
- 3.字符串填充:padStart和padEnd
- 4.Object.getOwnPropertyDescriptors()
- 八、移动端
- 1、移动端怎么做不同机型的适配
- 1.设置Meta
- 2.css3媒介查询
- 3.设置rem
- 第二种lib-flexible + px2rem-loader
- 2、移动端项目如何解决300ms延迟问题?
- 3、点击穿透
- 4、px,em,rem,vw,vh代表什么?
- 5、如何把px转为rem?
- 九、CSS
- 1.垂直水平居中
- 1.知道宽高,父元素relative,子元素absolute,top&left是50%,margin-top和margin-left再拉回自身高宽的一半
- 2.不知道宽高,子元素absolute + transform
- 3.子元素设为行内元素display: inline-block;vertical-align: middle水平居中;liine-height: initial;垂直居中
- 4.flex布局(无语,千万别记反)
- 2.display的相关
- 3.清除浮动
- 4. 用纯CSS创建一个三角形的原理是什么?
- 5.为什么要初始化CSS样式
- 6. absolute、fixed、relative
- 7. flex布局
- 8.圣杯模式
- 9.双飞翼模式
- 10.CSS浏览器前缀兼容写法
- 11.上下两个盒子的margin一个是20,一个是30,他们两的间距是多少?
- 12.什么是BFC?
- 13.IE盒子模型和标准子模型的区别?
- 十、C3
- 2.优雅降级和渐进增强的区别?
- 十一、H5
- 十二、跨域
- 1. vue中的proxy
- 2. jsonp跨域(只能get请求)
- 3. CORS(后端设置)
- 4.nginx
- 十三、算法
- 1.数组去重
- 十四、JavaScript
- 1.闭包
- 2. 构造函数、原型、原型链
- 2.继承
- 3.事件冒泡、事件委托、事件捕获
- 3. 什么是面向对象?什么是面向过程?
- 3.1面向对象编程:
- 3.2面向过程编程:
- 3.3 解决办法:使用对象:解决全局变量污染的问题(工作中最常用的方式)
- 3.4使用原型可以同时解决上面三个弊端
- 4.js异步宏任务和微任务
- 十五、Jquery
- 11.1为什么使用jquery,有什么优点?
- 11.2 jQuery中的选择器
- 11.3 jQuery的美元符号$有什么作用?
- 11.4 window.onload和$(document).ready()
- 11.5使用jQuery中的动画
- 11.6jQuery中使用过哪些插入节点的方法,他们的区别是什么
- 11.7jQuery中如何来获取和设置属性
- 11.8如何来设置和获取HTML和文本的值?
- 11.9jQuery中有哪些方法可以遍历节点?
- 11.10说出jQuery中常见的几种函数以及他们的含义是什么?
- 11.11jQuery使用ajax
- 十六、前端安全问题
- - xxs跨站脚本攻击(恶意注入html代码)
- - CSRF攻击(跨站请求伪造)
- - SQL注入攻击
- 十七、浏览器
- 1cookie、seesion、token的异同点
- 1.1 cookie
- 1.2 seesion
- 1.3 token
- 2.前端本地缓存的三种方式
- 2.1 sessionStorage
- 2.2 localStorage
- 2.3 Cookies
- 十八、手写代码
- 6.继承
- 十九、react篇
- 1. 什么是React?
- 2.React有什么特点?
- 3. React有哪些限制?
- 4. 什么是JSX?
- 5. 你了解 Virtual DOM 吗?解释一下它的工作原理。
- 6. 为什么浏览器无法读取JSX?
- 7. 与ES5相比,React的ES6语法有何不同?
一、vue3.0篇
https://blog.csdn/weixin_44700978/article/details/109301851
二、vue2.0篇
1. vue生命周期?
vue生命周期分为八个阶段:创建前后,挂载前后,更新前后,销毁前后
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
2. vuex是什么?以及组件传值?
vue的状态管理框架,数据持久化。
this.
s
t
o
r
e
.
c
o
m
m
i
t
(
)
进仓库
t
h
i
s
.
storemit()进仓库 this.
store.commit()进仓库this.store.state()取值
具体看:https://blog.csdn/weixin_44700978/article/details/109193214
3.vue中自定义指令如何使用?
两种使用方式:
- 局部注册
//VUE文件:
<template>
<div class="home">
输入框:<input v-focus>
</div>
</template>
<script>
export default {
data() {
return {
}
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
created() {},
methods:{}
};
</script>
- 全局注册
- 新建一个文件directive/directives.js利用Vue.directive()并暴露
import Vue from 'vue';
Vue.directive('focus',{
//当绑定元素插入到DOM中
inserted: function(el){
el.focus(); //元素聚焦
el.setAttribute('placeholder','自定义内容');
}
})
Vue.directive('***',{
inserted: function(el){
//....
}
})
export {Vue}
- main.js引入
import directive from './components/global/directives';
- 页面使用
<el-input v-model="input" placeholder="" v-focus></el-input>
如果指令需要传值或者多个值
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>
----------
参考地址:https://www.gxlcms/JavaScript-53105.html
4. 自定义指令的生命周期
bind,inserted,update,componentUpdated,unbind
1>bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2>inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
3>update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
4>componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5>unbind:只调用一次,指令与元素解绑时调用。
5. vue中的过滤器如何使用?
使用在双花括号插值和 v-bind 表达式
局部过滤器权重大于全局过滤器
- 局部过滤器:filters
var vm = new Vue({
el: '#app',
data: {
msg: '温小鹿'
},
methods: {},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filters: {
dataFormat(msg) {
return msg+'xxxxx';
}
}
});
- 全局过滤器:创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
6.组件通信?
1. 父子组件之间传值(六种方式)
- 子组件$emit触发,父组件on监听
- 父组件设置属性传,子组件通过props接收
- this. p a r e n t 和 t h i s . parent和this. parent和this.children也可以获取到子组件的值
- 父组件provide提供变量 子组件inject注入需要的数据
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
官网文档写的很清楚了:https://cn.vuejs/v2/api/#provide-inject
- $ attrs、$listeners
https://zhuanlan.zhihu/p/388016979
- slot插值传值
子组件slot通过属性传递
父组件v-slot="slotProps" 或者slot-scope="slotProps"(2.6+废弃)
参考:https://www.jianshu/p/758d9780dab8
https://juejin/post/7009854993284988941
2. 非父子组件(两种方式)
- Vuex,commit进仓库,然后使用getters获取
- 公共bus
7. 请解释一下vue中的单向数据流的理解?
单向数据流就是:数据总是【向下传递】从父级组件传递给子组件,只能单向绑定。子组件内部不能直接修改从父级传递过来的数据,当尝试在子组件内部修改父组件的数据,vue将报错。主要是为了组件解耦。(假如子组件可以修改父组件数据,那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化,发生连锁反应,所以vue不推荐子组件修改父组件数据,直接修改props会抛出警告
如果要改变父组件的值
8. 请说什么是动态组件,如何使用,以及keep-alive的作用
动态组件:让多个组件使用同一个挂载点,并动态切换。通过使用保留的 元素,动态地绑定到它的 :is 特性,根据:is="组件名"去自动匹配组件,如果匹配不到则不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>点击显示子组件</button>
<component :is="show"></component>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
data:{
show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.show);
if(index<2){
this.show = arr[index+1];
}else{
this.show = arr[0];
}
}
},
components:{
first:{
template:'<div>这是子组件1<div>'
},
second:{
template:'<div>这是子组件2<div>'
},
third:{
template:'<div>这是子组件3<div>'
},
}
})
</script>
</body>
</html>
**keep-alive:**是一个抽象组件,它自身不会渲染一个DOM元素。缓存组件内部状态,避免重新渲染,造成性能消耗
keep-alive属性:
- include - 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
- max - 数字。最多可以缓存多少组件实例。
keep-alive有两个生命周期:
activated:页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
deactivated:页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated
keep-alive的用法:
<keep-alive>
<component>
<!-- 该组件将被缓存! -->
</component>
</keep-alive>
9. 第一次页面加载会触发哪几个钩子?
beforeCreate, created, beforeMount, mounted
10.简述每个周期具体适合哪些场景
* beforecreate : 可以在这加个loading事件,在加载实例时触发
* created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
* mounted : 挂载元素,获取到DOM节点
* updated : 如果对数据统一处理,在这里写上相应函数
* beforeDestroy : 可以做一个确认停止事件的确认框
* nextTick : 更新数据后立即操作dom
11.$nextTick的使用
vue中数据和dom渲染由于是异步的,当你修改了data 的值然后马上获取这个 dom 元素的值,是不能获取到更新后的值, 你需要使用 $nextTick 这个回调,让修改后的 data 值渲染更新到 dom 元素之后在获取,才能成功。
什么时候需要 $nextTick?
- Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
- 更改数据后想立即使用js操作新的视图
12.assets和static的区别?
都是存放静态资源文件的,assets打包的时候会编译,static不会编译。assets可以放一些Js会进行编译,static可以放一些第三方文件,比如字体图标
13.vue常用的修饰符
- .stop:等同于Js中的event.stopPropagation(),防止事件冒泡
- .prevent:等同于js中的event.preventDefault(),阻止默认事件
- .capture:与事件冒泡的方向相反,事件捕获由外到内
- .self:只会触发自己范围内的事件,不包含子元素
- once: 只会触发一次
14.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。
15. v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
v-for比v-if的优先级更高一些,如果同时出现,每次渲染都会执行循环再判断条件,无论如何循环都不可避免,浪费性能。
解决办法就是:
- 外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
- 如果条件出现在循环的内部,可通过计算属性提前过滤掉不需要的项
16.Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
如果使用对象,内存地址是一样的,会污染其他实例的状态。根实例只有一个,就不用担心污染,所以是对象。组件可能存在多个实例,给组件实例创建自己的私有数据空间。
17.你知道vue中key的作用和工作原理吗?说说你对它的理解。
为了高效的更新DOM,通过key可以判断出两个dom节点是否相同,减少dom操作,提高性能
18.你怎么理解vue中的diff算法?
对比新旧节点
当数据发生改变时,set方法会让调用Dep.notify通知所有订阅者Watcher,订阅者就会调用patch给真实的DOM打补丁,更新相应的视图。
19. 谈一谈对vue组件化的理解?
- 组件化
可复用,高内聚、低耦合的;
-遵循单向数据流的原则。
20. 谈一谈对vue设计原则的理解?
- 渐进式JavaScript框架
- 易用、灵活和高效
21. 你了解哪些Vue性能优化方法?
1.路由懒加载
2.keep-alive缓存
https://blog.csdn/weixin_42646130/article/details/93333207
3.Webpack优化
1.修改vue.config.js中的配置项,把productionSourceMap设置为false,不然最终打包过后会生成一些map文件,并且在生成环境是可以通过map去查看到源码的,这样会造成源码泄漏,这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩,使打包过后体积变小。
2.使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式引入需要的插件。
4.按需加载
22. 单页面应用和多页面应用区别及优缺点
优点:快。内容改变不需要改变整个页面,局部刷新就行,减少服务器的压力;
缺点:不利于seo搜索. 第一次加载比较慢(不要生成。map文件,这个文件是用来查看样式和结构的,懒加载:异步引入路由页面)
23. 父子组件之间的生命周期顺序
- 加载渲染过程
->父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated
- 子组件更新过程
->父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated
- 父组件更新过程
父beforeUpdate -> 父updated
- 销毁过程
-> 父beforeDestroy
-> 子beforeDestroy -> 子destroyed
-> 父destroyed
24. vue中组件创建的方式有哪些?
有三种方式,如下:
- 1.使用Vue,extend来创建
- 2.直接使用Vueponent创建
- 3.在被控制的#app外面,使用template元素,定义组件的HTML模板结构
25. 在Vue中怎么添加一个超链接?
<a :href="'https://www.baidu'">My site</a>
<a :href="'https://www.baidu?p='+id">一个Vue table问题</a>
26. Vue中EventBus的实现
main.js中挂载到原型上
Vue.prototype.$EventBus = new Vue();
触发:
this.$EventBus.$emit('eventName', param1,param2,...)
监听:
this.$EventBus.$on('eventName', (param1,param2,...)=>{
//需要执行的代码
})
移除监听
this.$EventBus.$off('eventName');
27. vue组件的全局注册和局部注册
- 全局注册在main.js里注册
Vueponent(组件名称,为组件创建时定义的变量)
import goTo from '../component/goTo'
Vue.conponent('goTo', goTo)
- 局部注册
组件局部注册:只有注册了该组件的页面才可以使用
import User from './components/User'
export default {
name: 'App',
components: {
HelloWorld,
User
}
}
28.vue数据双向绑定的原理(2.0和3.0)
- 2.0
1.difineProperty挟持各个属性的getter,setter,在数据变动时发布消息给订阅者,触发响应的监听回调
2.observe(观察者)对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者。
3.watch(订阅者)订阅observe并通知compile
4.compile初始化模板并更新视图
- 3.0
利用proxy代理整个对象
29. 虚拟doms
真实的dom节点上有很多的属性,所以原生的js去描述一个DOM节点,速度快,不操作真实的dom,代码不会冗杂
虚拟dom原理流程:
模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM
30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
都行,但是vuex里的store是一个全局变量,性能上尽量不使用全局变量,而且vuex是状态管理框架,尽量简而又简单。请求代码放api.js里就可。
31. 路由守卫
- 全局钩子有beforeEach、beforeResolve(2.5后新增)、afterEach
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去?
console.log(from) => // 从哪个页面来?
next() => // 一个回调函数
}
router.afterEach(to,from) = {}
- 单个路由独享beforeEnter
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
- 组件路由守卫:beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave
// 跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
// 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一页面,刷新不同数据时调用,
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
32. vue如何引入第三方库,比如jquery?
很多方式:
webpack中配置 alias,import 引入
webpack 中配置 plugins,无需 import 全局可用
33. vue要做权限管理该怎么做,如果控制到按钮级别的权限该怎么做?
- 按钮权限管理
获取权限表,判断用户是否有权限,然后再if判断可选不可选
34. vue和jQuery的区别
vue是框架,jquery是js库。框架是项目的核心,对项目入侵较大,中途想换,不好操作,jquery对项目入侵较小。
35. 引进组件的步骤
Vueponent()注册 再引进
36. slot
- 不具名插槽
父组件引入子组件,子组件使用
封装的返回顶部公共的包裹router-view
- 具名插槽
37. MVVM模式和MVM模式
- MVVM
MVVM就是模型-视图-视图模型层。这个模式实现视图和视图模型层的双向绑定。
典型的情况是,View Model通过使用obsever模式(观察者模式)来将View Model的变化通知给model。
关键点:
1、用户和View交互。
2、View和ViewModel是一对一关系,也就意味着一个View只能映射到一个ViewModel。
3、View持有ViewModel的引用,但是View没有任何Model的信息。
4、View 和ViewModel之间有双向数据绑定关系。 - MVC
MVC就是模型-视图-控制。通信是单向的。
1、View传送指令到Controller
2、Controller完成业务逻辑后,要求Model改变状态
3、Model将新的数据发送到View,用户得到反馈
38. Vue监听键盘事件
别名 | 含义 |
---|---|
.enter | 鼠标进入 |
.tab | Tab |
.delete | 捕获“删除”和“退格”键 |
39.Watch怎么深度监听对象变化
第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
40.Vue路由实现的原理?
两种方式
Hash — 默认值,利用 URL 中的hash("#"),刷新不会请求数据
history-- 利用URL中的路径(/home),刷新会请求数据
2.history
前端路由改成history,部署之后,nginx配置try_files指令
https://router.vuejs/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
41.Vue的路由如何传参?以及params和query的区别?
- router-link 的to去传参
- this.$router.push() 接收的时候this.$route.params或者this.$route.query
> params和query的区别
> 1、params传参必须配置路由表,name引入路径,请求不会显示在地址栏
> 传参: this.$router.push({ name:'xxx' params:{ id:id } })
> 2、query要用path来引入,请求会显示在地址栏
> this.$router.push({ path:'/xxx' query:{ id:id } })
42.关于Vue的优缺点,你知道哪些?
优点:组件化,数据双向绑定,轻便、高效、易上手,中文文档;
缺点:兼容性差,不利于SEO 优化,第一次加载白屏时间长,容易造成数据丢失。
43.vue中使用mixins
- 局部引入
写js文件,暴露出去,引入mixins:[名字],用的时候和当前组件用的一样,{{}}和this.(方法名) - 全局混入
Vue.mixin({
created() {
console.log('全局混入的钩子函数');
}
});
还有注册引入,这个博主写的很清晰了,就懒了懒了。
https://wwwblogs/fengyuexuan/p/10918011.html
44.组件化和模块化的区别?
组件化和模块化的区别
组件:就是把重复的代码提取出来合并成为一个个组件,组件最重要的就是重用(复用)
模块化开发:分属同一功能/业务的代码进行隔离(分装)成独立的模块,可以独立运行,独立管理,每个模块有很多接口,可供调用
45.vue数据丢失的4中情况&解决方法
<template>
<div>
<div>{{ colors }}</div>
<div>{{ obj }}</div>
<div>{{ intro }}</div>
</div>
</template>
<script>
export default {
data() {
return {
colors: ["red", "green", "blue"],
obj: {},
};
},
mounted() {
// 1 数组中的值类型修改
this.colors[1] = "pink";
// 2 数组中的新成员
this.colors[3] = "gold";
// 3 对象中的新属性
this.obj.size = 200;
// 4 未初始化的数据
this.intro = "111111";
},
};
</script>
解决方法:
第1,2种情况 使用新数组替换之前的老数组
this.colors = ["red", "pink", "blue","gold"]
第3种情况 使用新对象替换之前的老对象
this.obj = {siz: 200}
第4种情况 初始化这类数据即可
data() {
return {
colors: ["red", "green", "blue"],
obj: {},
intro: '' // 初始化info
};
},
除此之外,还可以使用vue提供的$set方法
this.$set(this.colors, 1, pink) // 修改数组的数据
this.$set(this.obj, 'size', 200) // 修改对象的数据
三、axios请求
1.axios的特点有哪些?
1、axios是一个基于promise的HTTP库,支持promise的所有API;
2、它可以拦截请求和响应;
3、它可以转换请求数据和响应数据,并对响应回来的内容自动转换为json类型的数据;
4、它安全性更高,客户端支持防御XSRF
2. axios有哪些常用方法?
3. 封装axios
大概说一些流程吧,后期再补
> 1. 设置开发和生产的请求地址
> 2.设置默认的信息:超时时间、post默认请求头、引入Qs
> 3.设置请求拦截器(携带token或者加loding)
> 4.设置响应拦截器(根据后端返code跳转页面,做出响应)
> 5. `封装get,post请求,统一Api管理
四、AJAX
1.什么是ajax?
异步的JavaScript和XML(传输数据的可扩展标记语言)
2.ajax轮询?
封装一个函数,用setInterval间隔时间去发起请求
setInterval("函数名()", 500);
function 函数名(){
$.ajax({
url: '/new_window_url/',
async:true,
type: '',
success: function (data) {}
})
}
async. 默认是 true,即为异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的success方法,这时候执行的是两个线程。
async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
四、ES5
五、ES6
六、ES7
- Array.prototype.includes()
includes()的作用,是查找一个值在不在数组里,若在,则返回true,反之返回false
indexOf()与includes()区别
检测数组或字符串中是否包含某一个元素
indexOf返回的是数值类型,而includes返回的是布尔类型
indexOf不能判断数组中是否含有NaN,而includes可以
let arr = [1,2,3,NaN]
console.log(arr.indexOf(NaN))//-1
console.log(arr.includes(NaN))//true
- 求幂运算Math.pow(3, 2)
七、ES8
1.async await
2.Object.entries()和Object.values()
- Object.entries()
把键值按照二位数组返回。若目标对象是数组时,则会将数组的下标作为键值返回。
Object.values({ one: 1, two: 2 }) //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']
- Object.values()返回键值中的值
3.字符串填充:padStart和padEnd
4.Object.getOwnPropertyDescriptors()
返回目标对象中所有属性的属性描述符,该属性必须是对象自己定义的,不能是从原型链继承来的
八、移动端
1、移动端怎么做不同机型的适配
1.设置Meta
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
- initial-scale:初始化缩放,- initial-scale=1.0:不缩放
- user-scalable:是否允许用户自行缩放,取值0或1,yes或no
- name:viewport描述网页
- content:便于搜索引擎机器人查找信息和分类信息用的
- width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
- height: viewport 的高度 (范围从 223 到 10,000
2.css3媒介查询
3.设置rem
- 一种是创建rem.js引入main.js+下载插件postcss-pxtorem自动把px转为rem
- 另一种是下面这种
第二种lib-flexible + px2rem-loader
https://blog.csdn/weixin_44700978/article/details/119519699
2、移动端项目如何解决300ms延迟问题?
FastClick
3、点击穿透
1.meta 标签设置 width=device-width 和 user-scalable=0
2. 阻止冒泡event.stopPropagation();
3. 使用fastclick库
4.不要混用touch和click
4、px,em,rem,vw,vh代表什么?
- px是针对于显示屏屏幕分辨率而言的
- em是相对于父元素字体大小
- rem是相对于html元素的
- vw、vh,直接根据视口宽高适配。
5、如何把px转为rem?
1、创建rem.js文件
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
2、在main.js中引入rem.js
import './utils/rem'
3、配置 postcss-pxtorem 自动转换px为rem
$ npm install postcss-pxtorem -D
4、修改根目录 .postcssrc.js 文件
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"],
// 注意:如果有使用第三方UI如VUX,则需要配置下忽略选择器不转换。
// 规则是class中包含的字符串,如vux中所有的class前缀都是weui-。也可以是正则。
"selectorBlackList": ["weui-"]
}
九、CSS
1.垂直水平居中
1.知道宽高,父元素relative,子元素absolute,top&left是50%,margin-top和margin-left再拉回自身高宽的一半
2.不知道宽高,子元素absolute + transform
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.子元素设为行内元素display: inline-block;vertical-align: middle水平居中;liine-height: initial;垂直居中
4.flex布局(无语,千万别记反)
父元素设置
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
2.display的相关
3.清除浮动
1.浮动元素之后加一个空元素< div class=“clear”>< /div>,在css写.clear{clear:both;}
2. 浮动元素加overflow:hidden;或overflow:auto;
3. 给浮动的元素的容器添加浮动
4. 浮动元素后面的元素添加clear属性。
5. 浮动元素添加:after伪元素,然后设置隐藏visibility: hidden;
4. 用纯CSS创建一个三角形的原理是什么?
宽度和高度设置为0,border设置为transparent,再设置border-top的高度颜色样式
5.为什么要初始化CSS样式
浏览器有兼容性问题
6. absolute、fixed、relative
- absolute相对于父元素
- relative相对于原来的位置
- fixed相对于浏览器窗口
7. flex布局
8.圣杯模式
左右俩边宽固定,中间自适应,中间要先渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
#container{
padding: 0 100px;
overflow: hidden;
}
.div {
height: 100px;
float: left;
}
.middle{
width: 100%;
background-color: sandybrown;
}
.left{
width: 100px;
background-color: plum;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
width: 100px;
background-color: aqua;
margin-left: -100px;
position: relative;
right: -100px
}
</style>
</head>
<body>
<div id="container">
<div class="div middle">middle</div>
<div class="div left">left</div>
<div class="div right">right</div>
</div>
</body>
</html>
9.双飞翼模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
html,body{
margin:0;
padding:0;
}
.container{
border:1px solid;
width:500px;
}
.container:after{
content:'';
display: block;
clear:both;
height: 0;
}
.middle{
width:100%;
height:300px;
float:left;
}
.middle .wrap{
background:pink;
height:300px;
margin-left: 100px;
margin-right: 100px;
}
.left{
width:100px;
height:100px;
background:blue;
float:left;
margin-left:-100%;
}
.right{
width:100px;
height:100px;
float:left;
background:yellow;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
<div class="wrap"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
10.CSS浏览器前缀兼容写法
前缀 | 浏览器 |
---|---|
-webkit- | 谷歌或者safari |
moz | 火狐 |
ms | IE |
o | Opera |
11.上下两个盒子的margin一个是20,一个是30,他们两的间距是多少?
间距是30,因为塌陷。
12.什么是BFC?
BFC是块级格式化上下文,是为了解决塌陷问题。上下两个盒子的Margin,会塌陷的。
如何触发BFC?
- float: right; float: left; (浮动本身就触发了bfc)
- position: absolute/fixed;
- display: table/table-cell;(每个其实都是一个独立的区域,执行效率比较慢)
- overflow: 非visible; => hidden / auto(自动)/ scorll(溢出滚动);
13.IE盒子模型和标准子模型的区别?
两者的区别在于content的不同,IE盒模型的content包括border、padding
十、C3
2.优雅降级和渐进增强的区别?
- 优雅降级
保持现在的版本,向下兼容低版本浏览器 - 渐进增强
保持现在的版本,向上优化
十一、H5
十二、跨域
协议域名端口不一致就会造成跨域
1. vue中的proxy
2. jsonp跨域(只能get请求)
3. CORS(后端设置)
4.nginx
https://blog.csdn/weixin_44700978/article/details/108649493
十三、算法
1.数组去重
这个有单独写,很清楚了
https://blog.csdn/weixin_44700978/article/details/119466153
十四、JavaScript
1.闭包
1什么是闭包?
闭包是一个可以获取其他函数内部变量的函数
2. 闭包的作用?
避免全局变量的污染
希望变量长期驻扎在内存当中(一般函数执行完毕,变量和参数会被销毁)
2. 构造函数、原型、原型链
每一个构造函数都有原型对象
prototype指向它的原型对象
constructor指向构造函数
__proto是实例对象指向原型对象
proto从原型上找属性和方法的过程就叫做原型链
2.继承
https://wwwblogs/ranyonsue/p/11201730.html
3.事件冒泡、事件委托、事件捕获
- 事件冒泡
从里面最精确的元素,一层层一层的向外执行 - 事件捕获
从最外层的元素一层一层的向里执行,直到找到最精确的元素 - 事件委托
子元素的事件委托给父元素执行
stopPropagation()阻止默认事件
3. 什么是面向对象?什么是面向过程?
3.1面向对象编程:
面向对象是一种编程思想,当解决一个问题的时候,面向对象会把事物抽象成对象的概念,就是说这个问题里面有哪些对象,然后给对象赋一些属性和方法,然后让每个对像去执行自己的方法,问题得到解决
var divList = getEle('div');
var pList = getEle('p');
setColor(divList,'10px solid green');
setColor(pList,'10px solid yellow');
function getEle(eleName) {
return document.getElementsByTagName(eleName);
}
function setColor(eles,value) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = value;
}
}
好处:解决了代码冗余,利于维护
弊端:全局变量污染(所有的变量都是全局变量,就有可能别人的变量名和你的重复导致一些bug)
面向对象的三大特征:
封装:将功能代码封装到对象中,只暴露外部接口(API),使用者无需关系内部实现
继承:一个对象拥有另外一个对象所有的成员变量(属性和方法)
多态:一个对象在不同的情况下的多种状态(js从语法的角度上来说没有多态,因为js是基于对象的语言)
3.2面向过程编程:
字面意思理解就是注重过程的,当解决一个问题的时候,面向过程会把事情拆分成:一个个函数和数据(用于方法的参数)。然后按照一定的顺序,执行完这些方法(每个方法看作一个过程)
var divList = document.getElementsByTagName('div');
var pList = document.getElementsByTagName('p');
for (var i = 0; i < divList.length; i++) {
divList[i].style.border = '10px solid green'
}
for (var i = 0; i < pList.length; i++) {
pList[i].style.border = '10px solid yellow'
}
弊端:(1):代码冗余 (2):不利于维护
3.3 解决办法:使用对象:解决全局变量污染的问题(工作中最常用的方式)
弊端:每声明一个构造函数,就要声明一个对象,非常的麻烦
var obj = {
getEle : function (eleName) {
return document.getElementsByTagName(eleName);
},
setColor : function (eles,value) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = value;
}
}
}
var divList = obj.getEle('div');
var pList = obj.getEle('p');
obj.setColor(divList,'10px solid green');
obj.setColor(pList,'10px solid yellow');
3.4使用原型可以同时解决上面三个弊端
①:代码冗余,不利于维护弊端
②:全局变量污染问题
③:解决每声明一个构造函数就要声明一个对象问题
4.js异步宏任务和微任务
十五、Jquery
11.1为什么使用jquery,有什么优点?
1、轻量级框架,大小不到30KB
2、强大的选择器,出色的DOM操作的封装
3、完善的ajax(原生的太麻烦)
5、兼容性好
6、支持链式操作
11.2 jQuery中的选择器
元素选择器(.calss #id)、属性选择器()、css选择器($("p").css(设置颜色))
单独写一下属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
11.3 jQuery的美元符号$有什么作用?
jQuery的选择器,也可以写成jQuery
11.4 window.onload和$(document).ready()
- $(document).ready()是dom加载完就可以操作了
- window.onload是加载完所有的资源
11.5使用jQuery中的动画
隐藏: hide()
显示: show()
淡入淡出:fadeIn()==淡入(显示) fadeOut() == 淡出(消失)
滑动:slideUp() ===向上滑动 slideDown() ==向下滑动
11.6jQuery中使用过哪些插入节点的方法,他们的区别是什么
在元素内部添加
append:向每个匹配的元素内部追加内容
<p>我想说:</p>
$("p").append("<b>你好</b>")
<p>我想说:<b>你好</b></p>
appendTo:将所有匹配的元素追加到指定的元素中
<p>我想说:</p>
$("<b>你好</b>").appendTo("p")
<p>我想说:<b>你好</b></p>
prepend:向每个匹配的元素内部前置添加内容
<p>我想说:</p>
$("p").prepend("<b>你好</b>")
<p><b>你好</b>我想说:</p>
prependTo:将所有匹配的元素前置到指定的元素中
<p>我想说:</p>
$("<b>你好</b>").prependTo("p")
<p><b>你好</b>我想说:</p>
在元素外部添加
after:在每个匹配元素之后插入内容
<p>我想说:</p>
$("p").after("<b>你好</b>")
<p>我想说:</p><b>你好</b>
insertAfter:将所有配的元素插入到指定元素的后面
<p>我想说:</p>
$("<b>你好</b>").insertAfter("p")
<p>我想说:</p><b>你好</b>
before:在每个匹配的元素之前插入内容
<p>我想说:</p>
$("p").before("<b>你好</b>")
<b>你好</b><p>我想说:</p>
insertBefore:将所有匹配的元素插入到指定的元素的前面
<p>我想说:</p>
$("<b>你好</b>").insertBefore("p")
<b>你好</b><p>我想说:</p>
11.7jQuery中如何来获取和设置属性
可以用attr()获取和设置元素属性
removeAttr()方法来删除元素属性
11.8如何来设置和获取HTML和文本的值?
获取HTMl:$("选择器").html()
获取文本的值:$("选择器").text()
11.9jQuery中有哪些方法可以遍历节点?
children():获取匹配元素的子元素集合,不考虑后代元素 $(function(){$("div").children()})
next()获取匹配元素后面紧邻的同级元素
prev()获取匹配元素前紧邻的同级元素
siblings()获取匹配元素前后的所有同辈元素
11.10说出jQuery中常见的几种函数以及他们的含义是什么?
jQuery中常见的函数如下:
1)get()取得所有匹配的DOM元素集合.
2)get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素.
3)append(content)向每个匹配的元素内部追加内容.
4)after(content)在每个匹配的元素之后插入内容.
5)html()/html(var)取得或设置匹配元素的html内容.
6)find(expr)搜索所有与指定表达式匹配的元素.
7)bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数.
8)empty()删除匹配的元素集合中所有的子节点.
9)hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.
10)attr(name)取得第一个匹配元素的属性值.
11)addClass(class)和removeClass(class)为指定的元素添加或移除样式.
12)css(name)访问第一个匹配元素的样式属性.
13)ajax([options])通过HTTP请求加载远程数据.
14)get(url,[data],[callback],[type])通过远程HTTP GET请求载入信息.
15)post(url,[data],[callback],[type])通过远程HTTP POST请求载入信息.
16)load(url,[data],[callback])载入远程HTML文件代码并插入至DOM中.
11.11jQuery使用ajax
$.ajax({
url:"demo_test.txt",
data: {name: '温小鹿'},
type: 'get/post'
success:function(data){
console.log(data)
}});
十六、前端安全问题
- xxs跨站脚本攻击(恶意注入html代码)
- CSRF攻击(跨站请求伪造)
- SQL注入攻击
没有太了解过,好像大多都是发生在cookie,恶意获取cookie盗取信息。
用token就行了
十七、浏览器
1cookie、seesion、token的异同点
解决Http无状态(每一次请求都是新的请求),无用户认证
1.1 cookie
用法:
import Cookies from 'js-cookie';
Cookies.set("key","value"); // 存
Cookies.get("key"); // 取
Cookies.remove('key'); // 删除
1、cookie存放在客户端,所以是不安全的,人为可以清除。
2、cookie有过期时间设定。如果不设置过期时间,说明这个cookie就是当前浏览器的会话时间,浏览器关了,cookie就不存在了。如果有过期时间,cookie就会存储到硬盘上,浏览器关闭不影响cookie。下次打开浏览器,cookie还存在
3、cookie有大小的限制,4KB。
不安全 会被攻击
1.2 seesion
1、session数据保存在服务器端
2、比cookie安全一点吧
3、会占用服务器性能
1.3 token
1、更安全
2.前端本地缓存的三种方式
2.1 sessionStorage
sessionStorage.setItem("key","value"); // 存
sessionStorage.getItem("key"); // 取
sessionStorage.removeItem("key"); // 删除
2.2 localStorage
localStorage.setItem("key","value"); // 存
localStorage.getItem("key"); // 取
localStorage.removeItem("key"); // 删除
2.3 Cookies
import Cookies from 'js-cookie';
Cookies.set("key","value"); // 存
Cookies.get("key"); // 取
Cookies.remove('key'); // 删除
十八、手写代码
https://blog.csdn/weixin_44700978/article/details/119395100
6.继承
https://wwwblogs/ranyonsue/p/11201730.html
十九、react篇
1. 什么是React?
2.React有什么特点?
3. React有哪些限制?
4. 什么是JSX?
5. 你了解 Virtual DOM 吗?解释一下它的工作原理。
6. 为什么浏览器无法读取JSX?
7. 与ES5相比,React的ES6语法有何不同?
有的太懒总结了,很厉害的前辈,参考地址:
https://wwwblogs/clicklin/p/9389892.html
https://www.it610/article/1294802420932616192.htm
https://juejin.im/post/5a0ea4ec6fb9a0450407725c
px转rem:https://juejin/post/6844903557930418189
本文标签: 答案
版权声明:本文标题:2022前端面试总结及答案(不定期更新) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728025867a1142663.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论