前端vue面试题

1、vue.js的两个核心是什么？
数据驱动、组件系统
2、vue常用的修饰符
.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用 .once：只会触发一次
.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
.number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
3、vue中 key 值的作用
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
4、的作用是什么?
:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
5、$nextTick的使用当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
6、$route 和 $router 的区别
$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。
7、vue-router的两种模式
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
　特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
　hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
　history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
　history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
8、vue中子组件调用父组件的方法
1）.父组件与子组件传值
　　父组件传给子组件：子组件通过props方法接受数据;
　　子组件传给父组件：emit方法传递参数
　2）.非父子组件间的数据传递，兄弟组件传值
　　eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）
9、vue-router 中的导航钩子
（1）全局导航钩子 全局导航钩子主要有两种钩子：前置守卫、后置钩子。router.beforeEach，router.afterEach
const router = new VueRouter({ … });
router.beforeEach((to, from, next) => {
// do someting
});
（2）单独路由独享组件
cont router = new VueRouter({
routes: [
{
path: ‘/file’,
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
（3）组件内的钩子
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的
我们看一下他的具体用法：
const File = {
template: <div>This is file</div>,
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 导航离开该组件的对应路由时被调用
}
}
10、Vue 组件中 data 为什么必须是函数
当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了
11、vue-router IOS白屏的问题
原因分析:
在ios机器上使用webview开发Vue项目时候，go history(-1)， 无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩
解决方案实现原理：
html，body都是100%，#app撑起了父元素的告诉，但是浏览器默认的滚动scroll并不是#app，而是body,某些因素，造成返回history 后，无法复原（ios 的锅），为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
#app {
width: 100%;
height: 100%;
background: #fff;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
left:0;
top:0;
}
#app 是父节点，最外层的container。根据具体情况而定