VUE相关面试题整理(仅供参考)

最新推荐文章于 2023-03-18 18:28:38 发布

努力学习~冲鸭

最新推荐文章于 2023-03-18 18:28:38 发布

阅读量612

点赞数 1

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/keke11211/article/details/118967825

版权

vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. vue主要特点？常用指令有哪些？

答：vue两大特点：响应式编程、组件化。

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

vue的缺点：Vue 不缺入门教程，可是很缺乏高阶教程与文档还有书籍；VUE不支持IE8；生态环境差不如angular和react；社区不大。

2. vue生命周期有哪些？都是怎么用的？

答：Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

vue中内置的方法属性和vue生命周期的运行顺序：props => methods =>data => computed => watch

3. vue中computed和methods的区别？

答：调用方式不同：computed直接以对象属性方式调用，不需要加括号；而methods必须要函数执行才能得到结果。computed是属性访问；methods是函数调用。

绑定方式不同：methods与computed纯get方式都是单向绑定，不可以更改输入框中的值。

是否存在缓存：methods没有缓存，调用相同的值会重新计算；computed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

4. vue中computed和watch的区别？

答：计算属性computed :

（1）支持缓存，只有依赖数据发生改变，才会重新进行计算

（2）不支持异步，当computed内有异步操作时无效，无法监听数据的变化

（3）computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

（4）如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

（5）如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

（1）不支持缓存，数据变，直接会触发相应的操作；

（2）watch支持异步；

（3）监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

（4）当一个属性发生变化时，需要执行对应的操作；一对多；

（5）监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

　　 immediate：组件加载立即触发回调函数执行，

　　 deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

*（6）监听的对象也可以写成字符串的形式，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别，请勿滥用。

5. vuex的5种基本对象是什么？都是怎么使用的？

答：（1）state：存储状态；

（2）getters：对数据获取之前的再次编译，可以理解为state的计算属性。使用：$store.getters.

（3）mutations：修改状态，并且是同步的。使用：$store.commit()

（4）action：异步操作。使用：：$store.dispatch("")

（5）modules：模块化vuex，可以让每一个模块都拥有自己的state,mutations,action,getters，使得结构非常清晰，方便管理。

vuex和localStorage和sessionStorage的区别：

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理；

2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

6. mixins是什么？为什么要使用它？

答：mixins是一种分发vue组件中可复用功能的非常灵活的一种方式，mixins是一个js对象，它可以包含我们组件中script项目中的任意功能选项，如data，components，methods，created，computed等等，我们只要将共用的功能以对象的形式传入mixins选项中，当组件使用mixins对象时所有的mixins对象选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

7. vue传值的方式？

答：（1）父传子：props；通过ref 通信，父组件设置ref，通过$refs对象来获取子组件的数据；

（2）子传父：$emit；

（3）不同级：vuex，eventBus；

（4）直接把值放到sessionStorage或是localStorage中；

eventBus使用方式：

（1）使用前先定义一个全局的eventBus：window.eventBus = new Vue()

（2）在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自定义：eventBus.$emit('eventBusName', 123)

（3）在需要接收参数的组件中，用on接收值：eventBus.$on('eventBusName',function(val){ })

（4）最后记住要在beforeDestory()中关闭这个eventBus：eventBus.$off('eventBusName')

8. keep-alive的作用？

答：keep-alive是vue内置的一个组件，可以是被包含的组件保留状态，或避免重新渲染。

9. vue中双向数据绑定是如何实现的？

答：vue双向数据绑定是通过数据劫持结合发布订阅者的方式实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化；视图变化，数据也随之变化。

10. vue中params和query的区别？

答：query要通过path来引入，query类似于ajax的get传参，query在浏览器地址栏中显示参数，query刷新不会丢失参数数据；

params要通过name来引入，params类似于post传参，params不显示参数，params刷新会丢失参数数据。

11. vue-router有哪几种导航守卫？守卫路由做什么用？

答：（1）全局守卫router.beforeEach

（2）组件内守卫router.beforeRouteEnter，router.beforeRouteUpdate，router.beforeRouteLeave

（3）路由独享守卫beforeEnter

12. vue中data为什么是一个函数？

答：组件都是可复用的实例，一个组件创建好后，就可以被用在各个地方，而组建不管被复制了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，js只有函数构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

13. vue组件封装？

答：（1）定义好你需要使用者传入的数据

（2）定义好你提供给使用者的方法

（3）写好组件的内部逻辑

简单总结就是父子组件间通信传值问题。

14. vue2和vue3原理？

答：响应式原理实现逻辑：

（1）监听对象数组变化

（2）设置拦截，读取的时候进行依赖收集，设置的时候进行派发更新操作

Vue2响应式原理简化

（1）对象响应化：递归遍历每个key，使用Object.defineproperty方法定义getter、setter

（2）数组响应化：采用函数拦截方式，覆盖数组原型方法，额外增加通知逻辑

Vue2响应式原理弊端：

（1）响应化过程需要递归遍历消耗较大

（2）新加或删除属性无法监听数组响应化需要额外实现

（3）Map、Set、Class等无法响应式修改

（4）语法有限制

Vue3响应式原理简化：

（1）vue3中使用ES6的Proxy特性来实现响应式

（2）可以一次性友好的解决对象和数组

设计原理：

（1）effect：将回调函数保存起来备用，立即执行一次回调函数触发它里面一些响应数据的getter

（2）track（依赖收集）：getter中调用track，把前面存储的回调函数和当前target,key之间建立映射关系

（3）trigger（派发更新）：setter中调用trigger，把target,key对应的响应函数都执行一遍

15. vue中虚拟dom的diff算法？

答：Vue的Diff算法简单理解：只比较同级的节点，若找不到与新节点类型相同的节点，则插入一个新节点，若有相同类型的节点则进行节点属性的更新，最后删除新节点列表中不包含的旧节点。

16. 对MVVM怎么理解？

答：MVVM 由 Model、View、ViewModel 三部分构成：

（1）Model 代表数据模型，也可以在 Model 中定义数据修改和业务逻辑；

（2）View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来；

（3）ViewModel 是一个同步View 和 Model的对象；

MVC 是 Model-View-Controller 的缩写，即模型—视图—控制器。

（1）Model：后端传递的数据。

（2）View：所看到的页面。

（3）Controller：页面业务逻辑。

MVC和MVVM的关系：

（1）MVC的问题：当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

（2）MVVM主要是实现数据双向绑定。

17. 模板：模板是怎么挂载到vue上的？

答：https://www.jianshu.com/p/b37133fc76b5

18. less和sass之类的样式怎么使用？打包？编译？

答：（1）使用：需要先安装loader：npm i css-loader style-loader -D；npm i less less-loader -D 或 npm i node-sass sass-loader -D

sass和less的样式穿透使用/deep/：

外层 /deep/ 第三方组件 {

样式

}

（2）打包：webpack打包配置：loader 配置

（3）编译：node.js编译，工具编译

19. webpack的运行机制是什么？配置文件有什么用？

答：

20. babel是做什么用的？配置文件需要怎么配置？

答：

21. 插件：一般官方推荐elementUI，怎么处理自适应？怎么按需导入？

答：（1）全部导入：使用组件默认全部注册无需导入直接使用即可；全部导入整个UI框架，可能导致文件过大，会增加项目体积；

import Vue from 'vue';

import ElementUI from 'element-ui'; // 导入 elementUI

import 'element-ui/lib/theme-chalk/index.css'; // 导入 css

import App from './App.vue';

Vue.use(ElementUI);

（2）按需导入：没用用到的东西，不会被加入到项目中，减少了项目体积；每当使用到element-ui 具体组件时都需要手动去导入。

import Vue from 'vue';

import { Button, Select } from 'element-ui';

import App from './App.vue';

Vue.use(Button)

Vue.use(Select)

22. 框架：实际项目经验，项目优化，框架原理？

答：vue项目性能优化方案：代码层面的优化；webpack 配置层面的优化；基础的 Web 技术层面的优化。

一、代码层面的优化

1.0、组件优化，keep-alive缓存，提取公共组件。

1.1、v-if 和 v-show 区分使用场景：v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

1.2、computed 和 watch 区分使用场景：当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。

1.3、v-for 遍历必须为 item 添加 key，且避免同时使用 v-if：设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff ；v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

1.4、长列表性能优化：有些时候组件就是纯粹的数据展示，不会有任何改变，就不需要 Vue 来劫持数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。this.users = Object.freeze(users);

1.5、事件的销毁：Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。

1.6、图片资源懒加载：对于图片过多的页面，为了加速页面加载速度，所以需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。可以使用 Vue 的 vue-lazyload 插件（v-lazy）。

1.7、路由懒加载：Vue 是单页面应用，可能会有很多的路由引入，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件。

const Foo = () => import('./Foo.vue')

const router = new VueRouter({

routes: [

{ path: '/foo', component: Foo }

]

})

1.8、第三方插件的按需引入：例按需引入element-ui 组件库。

1.9、优化无限列表性能：需要采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。

1.10、服务端渲染 SSR or 预渲染