史上最全前端vue面试题!推荐收藏

JavaScript023

史上最全前端vue面试题!推荐收藏,第1张

1.为什么会形成跨域?

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法:安装插件

Pip install django-cors-headers

2.vuex的工作流程?

① 在vue组件里面,通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求,就会自动通过Mutate来修改state(数据中心里面的数据状态)里面的数据。

④ 最后由store触发每一个调用它的组件更新。

3.vuex是什么?怎么使用?

vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见:https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502

4.vuex中的数据在页面刷新后数据消失怎么解决?

使用sessionStorage或localStorage存储数据也可以引入vuex-persist插件

5.在vue中,如何阻止事件冒泡和默认行为?

在绑定事件时,在指令后边加上修饰符.stop来阻止冒泡,.prevent来阻止默认行为

6.深拷贝与浅拷贝?

假设B复制A,修改A的时候,看B是否变化:B变了是浅拷贝(修改堆内存中的同一个值),没变是深拷贝(修改堆内存中不同的值)。浅拷贝只是增加了一个指针指向已存在的内存地址,深拷贝是增加了一个指针并申请了一个新的内存,使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。

7.vue的生命周期?

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived (keep-alive)组件是否激活调用

8. keep-alive: 组件缓存

https://juejin.cn/post/6844903624099758094

router.js中:

meta: {keepAlive:true} // 需要被缓存

钩子执行顺序:created ->mounted ->actived

include表示需要缓存的页面;exclude表示不需要缓存的页面。如果两个同时设置,exclude优先级更 改,则组件不会被缓存。

应用场景: 用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回 该列表页,我们希望列表页可以保留用户的筛选状态。

9.vue传值方式?

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

$emit 分发

$on 监听

$off 取消监听

$once 一次性监听一个事件

在js文件中定义一个中央事件总线Bus,并暴露出来

具体的实现方式:

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus,否则会一直叠加调用这个方法。

应用场景:“退出登录” ->①点击退出登录;②修改密码后自动退出登录

11.组件跨级传值

$attrsa->b->c

$listeners监听

12.vue事件修饰符有哪些?

.stop .prevent .self .once .passive .sync

13.箭头函数中的this?

不具有this绑定,但函数体可以使用this,这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数?

如果不是函数的话,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了,当他是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,就不会互相影响。

16.v-if 和 v-show区别?

v-if 是对标签的创建与销毁, v-show 则仅在初始化时加载一次,v-if 开销相对来说比v-show 大;

v-if 是惰性的;v-show 做的仅是简单的css切换。

17.v-text 与 v-html区别?

v-text 用于普通文本,不能解析html;

v-html 反之。

18.v-for key的作用?

使用v-for更新渲染过的数据,它默认用“就地复用”策略。如果数据项的顺序改变,vue将不是移动DOM元素来匹配数据项的改变,而是简单地复用此处每个元素,并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。

key的特殊属性主要用在虚拟DOM算法,在新旧node对比时辨识VNods。如不使用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法,它会基于key的变化重新排列元素顺序。

19.Scss是什么?在vue-cli中安装步骤?有哪几大特性?

npm 下载loader (sass-loader,css-loader,node-sass),在webpack中配置extends属性(加.scss拓展) Vscode中可在扩展中下载

特性:可以用变量,可以用混合器,可以嵌套等。

20.vue获取dom?

ref

21.vue初始化页面闪动问题?

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router?

vue router 是官方路由管理器。

主要功能:路由嵌套,模块化 基于组件路由配置,路由参数、查询、通配符,细粒度导航控制,自定义的滚动条行为等。

23.vue路由传参,接收?

传: this.$router.push({path:'', query(params):{}})

接:this.$router.query.xxx

24.防抖和节流?

节流是一定时间内执行一次函数,多用在scroll事件上;

防抖是在一定时间内执行最后一次的函数,多用在input输入操作,表单提交等。

25.如何让scss只在当前组件中起作用?

1.一种组件间通信方式,适用于任意组件间通信

2.安装全局事件总线

new Vue({

...

beforeCreate () {

Vue.prototype. bus 绑定自定义事件,事件的回调留在 A 组件自身

methods: {

sendStudentName() {

demo(data){...}

}

...

mounted() {

this. on('xxx', (data) =>{

this. emit('xxx', this.demo)

})

},

(2)提供数据:this. emit('xxxxx', this.demo)

4.最好在 beforeDestroy 钩子中,用$off 去解绑当前组件所用到的事件

在main.js中绑定全局事件总线

发送:

接收:

销毁

1.eventLoop

2.setTimeout 误差原因

3.深浅拷贝

4.跨域原因及解决方案

5.css放在头部,js放在尾部

6.css触发bfc

7.webpack plugin和loader区别

8.前端优化

9.协商缓存

10.长列表优化

11.webview交互

12.vue响应式原理

13.原型

14.算法题:数组中有n个元素,排列

EventLoop是计算机系统的运行机制,js就是运行这个机制,因为js是单线程语言,所以一旦遇到一个耗时很长的任务就会卡住,js为了解决这个问题就有了EventLoop

Event Loop是一个程序结构,用于等待和发送消息和事件。

就是在程序中有了两个线程,一个负责应用本身,主线程,另一个负责主线程和其它进程,称为EventLoop

1、js是单线程语言

基本数据类型存放在栈中的简单数据段

引用数据类型存放在堆中的对象

因为定时器是宏任务,如果执行栈的时间大于定时器花费的时间,那么定时器的回调在 宏任务(macrotask) 里,来不及去调用,所有这个时间会有误差。所以就会有误差

宏任务是宿主发起的比如script,setTimeout

css放在头部是因为页面加载html生成dom树的时候就可以同时对dom树进行渲染,防止闪跳,白屏

js放在尾部是因为js会修改dom树,需要一个稳定的dom树

BFC是css的一个布局概念,块级格式化上下文

浮动float不为none的时候

定位为position:absolute和fixed的

display的时候

overflow不为visible

解决浮动父元素坍塌问题

解决自适应布局的问题

解决外边距垂直方向重合问题

loader是文件加载器,运行在nodejs中,并对文件进行打包,压缩转换

plugin是插件,用于拓展webpack的功能

浅拷贝有两种定于,第一种是赋值,第二种是拷贝对象的第一层属性,深层还是一样的

深拷贝是指将对象拷贝一份,无论如何修改都不会改变原有的

响应式原理就是当数据发生改变的时候视图也会跟着更新

VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。