vue前端面试题

双向绑定是什么意思？
说一下v-model的原理
MVC与MVVM的区别
methods方法与computed计算属性区别
再说一下Computed和Watch
vue的生命周期有哪些，说明各自特点用途
控制vue动画的六个类名
组件化和模块化的区别
nextTick知道吗，实现原理是什么
组件内的data为什么用函数返回对象
事件修饰符
表单修饰符
Vue事件绑定原理说一下
Vue2.x组件通信有哪些方式
hash路由和history路由实现原理说一下
keep-alive
vuex是什么？怎么使用？哪种功能场景使用它？
route和router的区别
接口请求一般放在哪个生命周期中
指令v-el的作用是什么

双向绑定是什么意思？

双向是指ViewModel中的data部分和View之间的双向关系。
正向：数据驱动页面
反向：页面更新数据
绑定是指自动化处理，data改变了view随之改变，反之也是。
不用像传统方式那样，通过onChange事件获取用户输入，然后再通过改变innerHtml修改显示。

说一下v-model的原理

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。
可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

MVC与MVVM的区别

MVC是后端的分层开发概念，MVVM是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、VMViewModel；
MVC中M是model层：负责操纵数据库。V是view层：视图层，发送请求，接收响应。C是controller，是业务逻辑处理层，接收请求和返回响应。
MVVM中M为model层：数据层保存数据，V是view层是页面的HTML结构。VM是一个调度者，链接M与V
什么是双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

methods方法与computed计算属性区别

两者的执行结果是完全相同的
计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，
methods每次触发重新渲染时，调用方法将总会再次执行函数

再说一下Computed和Watch

Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。
适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。

vue的生命周期有哪些，说明各自特点用途

beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

控制vue动画的六个类名

v-enter v-enter-to v-enter-active v-leave v-leave-to v-leave-active

组件化和模块化的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

nextTick知道吗，实现原理是什么

在下次 DOM 更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用
Promise
MutationObserver
setImmediate
如果以上都不行则采用setTimeout
定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

组件内的data为什么用函数返回对象

数据隔离
如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题；js在赋值object对象时，是直接一个相同的内存地址。所以为了每个组件的data独立，采用了这种方式。

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认行为
.capture 捕获,如果里面有冒泡的事件,谁加上它就先触发谁
.self 只有当 target 是当前元素才会被触发,冒泡和捕获都不能触发
.once 被它修饰的事件只会触发一次
.passive 不阻止默认行为,尽量不要和 parvent 一起使用,不然会失效
.enter 点了回车之后才能执行

表单修饰符

.Lazy：失去焦点或点击更新
.trim：去除表单两边的空格
.number：把表单默认的字符串转为数组类型

Vue事件绑定原理说一下

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

Vue2.x组件通信有哪些方式

父子组件通信
父->子props，子->父 $on $emit
获取父子组件实例 $parent $children
Ref 获取实例的方式调用组件的属性或者方法
Provide、inject 官方不推荐使用，但是写组件库时很常用

兄弟组件通信
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
Vuex

跨级组件通信
Vuex
$attrs $listeners
$Provide $inject

hash路由和history路由实现原理说一下

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

keep-alive

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

常用的两个属性include/exclude，允许组件有条件的进行缓存。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

vuex是什么？怎么使用？哪种功能场景使用它？

vuex 就是一个仓库，仓库里放了很多对象。
其中 state 存放的是数据状态，不可以直接修改里面的数据。

getters类似vue的计算属性，主要用来过滤一些数据。

mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。

actions:保存的触发mutations中方法的方法，可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。

一般什么样的数据会放在 State 中呢？
目前主要有两种数据会使用 vuex 进行管理： 1、组件之间全局共享的数据 2、通过后端异步请求的数据比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态

怎么使用Vuex? 在main.js引入store，注入。新建了一个目录store，… export

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

route和router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

接口请求一般放在哪个生命周期中

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中

指令v-el的作用是什么

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标

20道vue前端面试题总结相关推荐

web前端培训机构出来的能找到工作吗？30道Web前端面试题收藏版
Web前端高薪的诱惑,学习门槛低,无论是学生党还是工作者,都渴望着凭借着自己的能力,空余的时间,想学一下前端.或许是爱好,或许是想从事这份工作.但是真的那么容易吗?如今初级前端的工作,已经接近饱和,并 ...
30道Web前端面试题，你能答出多少道？
如今很多人受到Web前端的诱惑纷纷报名来学Web前端,他们希望自己通过5个月的系统学习就获得能找到一份高工资的Web前端开发工作,但是真的有那么容易吗?你真的有与高工资相对应的能力吗?你想知道自己的技 ...
常见的10道Web前端面试题及答案分享！
Web前端经典面试题有哪些?Web前端在近几年是越来越火热了,很多人看到了前端的待遇好,更看到了前端行业的发展前景,所以纷纷投入到学习前端技术学习中来.下面千锋给大家总结整理一些Web前端经典面试题, ...
vue前端面试题之vue组件传递参数
父子组件传递参数(props / $emit) 这个比较容易实现,我们只需要在组件上绑定自定义属性名就可以通过子组件中的props属性接受.看下面代码: 父组件代码parent.vue <tem ...
CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】
■ 符号说明
几道web前端面试题
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
前端面试题【131道】
前端面试题 1.vue2和vue3的主要区别 3.Apply/call/bind的原理是什么? 4.说说你对原型和原型链的理解? 5.说说你对ES6中Generator的理解 6.说说你对Event ...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关更多教程:https://su ...

20道vue前端面试题总结