vue面试题(常见问题答解)~~欢迎评论区留言

╰+攻爆jí腚メ 2024-04-18 12:46 51阅读 0赞

**一、vue中的v-show和v-if是做什么用的，两者区别是什么**  
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。  
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。  
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。  
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

如何让CSS只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>  deep  >>>

**二、v-model是什么？怎么使用？ vue中标签怎么绑定事件？**  
可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。  
vue的model层的data属性。绑定事件：<input @click=doLog() />

**三、vue-loader是什么？使用它的用途有哪些？**

解析.vue文件的一个加载器，跟template/js/style转换成js模块。
    	用途：js可以写es6、style样式可以scss或less、template可以加jade等

**四、NextTick 是做什么的**

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

**五、Vue 组件 data 为什么必须是函数**

因为 JS 本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了。

**六、对 keep-alive 的了解**  
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

**七、Vue 中 key 的作用**  
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。  
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

**八、Vue的双向数据绑定原理是什么？**

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：  
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter  
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化  
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图  
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:  
1、在自身实例化时往属性订阅器(dep)里面添加自己  
2、自身必须有一个update()方法  
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。  
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

**九、在Vue中使用插件的步骤**

1. 下载  npm install xxx
    2. 引入(根据api文档引入)，use
    3. 根据api在组件中使用和配置

**十、watch和computed差异**  
watch是进行数据监听，然后进行相应的操作，执行方法等conputed和methods的合体使用，比较耗性能，与vue性能优化相背而驰，尽量减少使用！computed是数据改变进行相应的数据变化，由老数据迸发新的数据（return返回），会利用缓存机制对 数据进行缓存 ，只有当 依赖数据变化的时候才会进行相应的变化  
**十一、你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？**  
根据vue-cli脚手架规范，一个js文件，一个CSS文件。  
**十二、vue组件之间如何传值通信**

父到子：
    子组件在props中创建一个属性，用来接收父组件传过来的值；
    在父组件中注册子组件；       
    在子组件标签中添加子组件props中创建的属性；   
    把需要传给子组件的值赋给该属性 
    子到父：
    子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
    将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
    在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。 
    平行组件：
    $emit推送，$on接收

**十三、vue-cli项目中src目录每个文件夹和文件的用法？**  
assets文件夹是放静态资源；  
components是放组件；  
router是定义路由相关的配置；  
view视图；  
app.vue是一个应用组件；  
main.js是入口文件；

**十四、axios是什么？怎么使用？描述使用它实现登录功能的流程？**  
请求后台资源的模块。npm install axios -S装好，  
然后发送的是跨域，需在配置文件中config/index.js进行设置。  
后台如果是Tp5则定义一个资源路由。js中使用import进来，  
然后.get或.post。返回在.then函数中如果成功，  
失败则是在.catch函数中

**十五、vue跨域请求接口代理方式**  
在config/index.js 配置一下  
然后重启服务  
axios.get(’/api/xxx’)就可以了  
**十六、vue页面的生命周期？（2+）**  
1. beforeCreate  
2. created  
3. beforeMount  
4. mounted  
5. beforeUpdate  
6. updated  
7. activated  
8. deactivated  
9. beforeDestroy  
10.destroyed

**十七、请详细说下你对vue生命周期的理解？**  
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。  
创建前/后： 在beforeCreated阶段，vue实例的挂载元素 e l 和 数 据 对 象 d a t a 都 为 u n d e f i n e d ， 还 未 初 始 化 。 在 c r e a t e d 阶 段 ， v u e 实 例 的 数 据 对 象 d a t a 有 了 ， el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了， el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。  
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。  
更新前/后：当data变化时，会触发beforeUpdate和updated方法。  
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

DOM 渲染在哪个周期中就已经完成

DOM 渲染在 mounted 中就已经完成了。

**十八、单页面应用的优缺点**  
单页面应用（SPA）  
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多页面应用（MPA）

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：
    				用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
    				前后端分离
    				页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：  
不利于seo  
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）  
初次加载时耗时多  
页面复杂度提高很多  
**十九、路由的跳转方式**  
一般有两种  
router-link标签会渲染为标签，咋填template中的跳转都是这种；  
另一种是编程是导航 也就是通过js跳转 比如 router.push(’/home’)

**二十、$route 和 $router 的区别**  
$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法。  
$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。

**二十一、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？**  
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

**二十二、vue-router有哪几种导航钩子**

有多种方式可以在路由导航发生时执行钩子： 
    	1.全局钩子
    	2.单个路由独享的 
    	3.组件级的

**二十三、对于Vue了解多少，什么是Vuex，VueRouter**  
vuex为状态管理，它集中存储管理应用的所有组件的状态，可以理解成一个全局仓库  
VueRouter是路由（spa）单页面应用的方式

**二十四、为什么通过vuex的motution修改state中的参数就不会报错，而直接更改state中的参数就会报错**  
vue 2取消冒泡全部$emit 用vuex 定义全局，state组件修改state 父组件访问state值

**二十五、使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？**

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

**二十六、vuex 原理**  
vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对象 Property set get 方法的代理劫持。  
最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；  
**二十七、vuex有哪几种属性？**  
有五种，分别是 State、 Getter、Mutation 、Action、 Module

**二十八、对比 jQuery ，Vue 有什么不同**

jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。  
Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发。

**二十九、mvvm框架是什么?它和其他框架(jquery)的区别是什么？哪些场景适合?**  
一个model+view+viewModel框架，数据模型model，viewModel连接两个 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。  
场景：数据操作比较多的场景，更加便捷