记录前端面试会问到的问题(高频)

1,第一次页面加载会触发哪几个钩子
会触发 下面这几个beforeCreate, created, beforeMount, mounted
2, 简述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom
3, created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
4, vue获取数据在哪个周期函数
Created和mounted都可以
放在created中，如果有dom操作，就放在mounted中，因为模板刚读取完毕。
5, mvvm 框架是什么
一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。
6, vue-router 是什么?它有哪些组件
//路由声明式跳转 ，active-class是标签被点击时的样式
//渲染路由的容器
//缓存组件
7, active-class 是哪个组件的属性
“active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;”
8, 怎么定义 vue-router 的动态路由? 怎么获取传过来的值
router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。
9, vue-router 有哪几种导航钩子?
1 、全局导航钩子
beforeEach
beforeResolve
afterEach
2 、某个路由独享的导航钩子
beforeEnter
3 、路由组件上的导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
10, $route 和 $router 的区别
$route为当前router跳转对象里面可以获取name、path、query、params,router.push方法,返回上一个history也是使用$router.go方法
11, .vue-router实现路由懒加载
https://www.cnblogs.com/hutuzhu/p/10407258.html 转载
12, 的作用是什么?
• 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
13, 如何获取dom
（1）在组件的DOM部分，任意标签中 写上：ref=“xxx”
（2）通过组件对象 this.$refs.xxx 获取到元素
14, vue-loader是什么？使用它的用途有哪些？
一、vue-loader作用：
解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
二、用途
js可以写es6,style样式可以写scss或less、template可以加jade等
三、
css-loader：加载由vue-loader提取出的CSS代码
vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码
15, 为什么使用key
所以一句话,key的作用主要是为了高效的更新虚拟DOM 唯一
16, 分别简述computed和watch的使用场景
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()

watch 属性监听 监听属性的变化
computed:计算属性通过属性计算而得来的属性
使用场景
computed 　
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 购物车商品结算的时候
watch
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　搜索数据
17, v-on可以监听多个方法吗
可以
写法
18, $nextTick的使用
Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，
19,data为什么必须是函数
在这个demo中data是一个对象，通过 new Vue 创建的 Vue 实例中，我们直接把data上的message属性通过模板渲染到页面上去了。这个data我们只在当前页面挂载的div#app这个点上使用，但是组件是可以被复用的，所以我们全局注册一个组件来分析。
21. .Vue中双向数据绑定是如何实现的
实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
22.单页面和多页面
多页面应用
每次跳转都会请求一个网页,返回的是html文件
优点:首屏时间非常快,SEO效果好 (搜索引擎优化)
缺点:因为跳转页面,页面切换比较慢
单页面应用
页面跳转不请求html页面,而是通过js渲染,通过js动态的把当前的内容删除掉,把新的页面的dom结构渲染出来
优点:页面切换快
缺点:首屏时间稍慢,SEO差
23. vue中过滤器有什么作用及详解
Vue.filter 一般我在时间转换上会使用全局的
24. v-if和v-for的优先级
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级
25. assets和static的区别
static放不会变动的文件 assets相反
都是存放静态资源文件的
26. vue常用的修饰符
.stop阻止点击事件冒泡
.prevent防止执行预设的行为
.capture与事件冒泡的方向相反，事件捕获由外到内,捕获事件
.self只会触发自己范围内的事件，不包含子元素
.once只执行一次
27. vue的两个核心点
组件化,数据驱动页面
28. delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
29. vue-router与location.href的用法区别
vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次
30. axios特点
1.从浏览器中创建XMLHttpRequests
2.node.js创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动换成json
axios中的发送字段的参数是data跟params两个
两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求
data一般适用于post put 请求

31. 请说下封装 vue 组件的过程？
首先，使用Vue.extend()创建一个组件
然后，使用Vue.component()方法注册组件
接着，如果子组件需要数据，可以在props中接受定义
最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法
32. params和query的区别

刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候，已经是$route而不是$router了哦！！

34. 不使用Vuex会带来什么问题
可维护性会下降，想修改数据要维护三个地方；
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

35. Vuex中actions和mutations的区别
mutations 必须是同步函数,
mutations是通过commit触发的
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
Action 提交的是 mutation，而不是直接变更状态。

36.vuex的状态

第一次整理面试 不足的地方大家可以提出来 多多支持~~~