vue面试题

谁借莪１个温暖的怀抱￠ 2022-12-12 01:59 9阅读 0赞

**1.<keep-alive></keep-alive>的作用是什么?**

用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望，列表页面可以保留用户的筛选(或选中)状态
    keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。

**2.如何获取dom?**

ref="domName" 用法：this.$refs.domName

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

vue文件的一个加载器，将template/js/style转换成js模块。

**4.为什么for循环使用key?**

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。主要是为了高校的更新虚拟dom

**5.v-modal的使用**

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
    v-bind绑定一个value属性；
    v-on指令给当前元素绑定input事件

**6.请说出vue.cli项目中src目录每个文件夹和文件的用法**

assets文件夹是放静态资源，components是放组件，router是定义路由相关的配置，app.vue是一个应用主组件；main.js是入口文件。

**7.v-on可以监听多个方法吗？**

可以。
    <input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur}" />

**8.分别简述computed和watch的使用场景**

computed:
    　　　　当一个属性受多个属性影响的时候就需要用到computed
    　　　　最典型的栗子： 购物车商品结算的时候
    watch:
    　　　　当一条数据影响多条数据的时候就需要用watch
    　　　　栗子：搜索数据

**9.$nextTick的使用**

当你修改了data的值想马上获取到这个dom元素的值，是不能获取到更新后的值，
    你需要使用$nextTick这个回调，让修改后的data的值渲染更新到dom元素之后再获取，才能成功。

**10.Vue中双向数据绑定是如何实现的？**

vue双向数据绑定是通过数据劫持，结合，发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，数据也随之发生改变
    核心：关于vue双向数据绑定，其核心是Object.definrProperty()方法

**11.单页面应用和多页面应用区别及优缺点**

单页面SPA
    就是指一个主页面的应用，浏览器一开始要加载所有必须的html,js,css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后再交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源，多用于PC端。
    优点：
    用户体验好，快。内容的改变不需要重新加载整个页面，对服务器压力较小，前后端返利，页面效果会比较炫酷（比如切换页面内容时的专场动画）
    缺点：
    不利于seo,导航不可用，如果一定要导航需要自行实现前进、后退。（由于单页面不能用浏览器的前进后退功能，所以需要建立堆栈管理）；初次加载耗时多；页面复杂度提高很多。
    
    
    
    多页面MPA,就是指一个应用中有多个页面，页面跳转时是整页刷新，

**12.v-if和v-for的优先级**

当v-if和v-for一起使用时，v-for具有比v-if更高的优先级，这意味着v=if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。
    如果v-if和v-for一起使用的话，vue中的会自动提示v-if应该放到外层去

**13.assets和static的区别**

相同点：
    
    assets和static两个都是存放静态资源文件，项目中所需要的资源文件图片，字体图标，样式等都可以放在这两个文件下
    
    
    不同点：
    assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，也就是会压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态文件就不会走打包压缩格式化的流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，所以在打包时会提高一定的效率。但是static中的资源文件由于没有进行压缩等操作，所以文件体积相对assrts中打包后的文件体积会大点，在服务器中会占据更大的空间。
    
    
    
    建议：
    将项目中的template需要的样式文件js文件等都可以放置在assets中，走打包这一流程，减少体积。而项目中引入的第三方资源文件如iconfont.css等文件就可以直接放在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

**14.vue常用的修饰符**

.stop
    等同于JS中的event.stopPropagation(),防止事件冒泡；
    
    .prevent
    等同于js中的event.preventDefault(),防止执行预设的行为(如果事件可取消，则取消该事件，而不停止事件的进一步传播)
    
    
    .capture
    与事件冒泡的方向相反，事件捕获由外到内；
    
    
    .self
    只会触发自己范围内的事件，不包含子元素
    
    
    .once 只会触发一次

**15.vue的两个核心点**

数据驱动：
    ViewModel，保证数据和视图的一致性
    
    
    组件系统：
    应用类UI可以看作全部是由组建树构成的

**16.Vue和jq区别**

jq是由选择器$选取dom对象，对其进行赋值、取值、事件绑定等操作，其实和原生的html的区别只在于可以更方便的选取和操作Dom对象，而数据和界面是在一起的，比如需要获取label标签内容，$("lable").val()它还是依赖dom元素的值
    
    
    Vue则是通过Vue对象将数据跟view对象将数据和view完全分离开了，对拘束进行操作不再需要引用对应的dom对象。数据和view是分离的，他们通过vue对象这个vm实现相互绑定。这就是mvvm

**17.vue slot**

简单来说，假如父组件需要在子组件内放一些DOM,那么这些DOM是显示，不显示，在哪个地方显示，如何显示，就是slot分发负责的活

**18.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？**

根据脚手架规范，只有一个js文件，一个css文件

**19.Vue2中注册在router-link上事件无效解决方法**

使用@click.native。因为router-link会阻止click事件，.native指直接监听一个原生事件

**20.axios的特点有哪些？**

从浏览器中创建XMLHttpRequests;
    node.js创建http请求；
    支持Promise;
    拦截请求和响应；
    转换请求数据和响应数据；
    取消请求；
    自动转换成json;
    axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求题进行发送
    params一般适用于get请求，data一般适用于post put请求

**21.params和query的区别**

query要用path来引入，params要用name来引入，接受参数都是类似的，分别是this.$route.query.name和this.$route.params.name
    
    
    url地址显示：query更加类似于我们ajax中get传参（浏览器地址栏中显示参数），params则类似于post（浏览器地址栏中不显示参数）,
    
    注意点：
    query刷新不会丢失query里面的数据
    params刷新会丢失数据

22.vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，div是不归vue管的，所以我们代码还没有解析的情况下容易出现花屏鲜香，看到类似于{
       {message}}的字样。
    
    解决方法：
    在css里面加上[v-lock]{display:none;}
    
    
    如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

**23.vue更新数组时出发视图更新的方法**

push();pop();shift();unshift();splice();sort();reverse()

24.vue修改打包后静态资源路径的修改

cli2版本
    将config/index.js里的assetsPublicPath的值改为'./'
    
    build:{
       assertsPublicPath:'./'
      
    }
    
    
    
    cli3版本
    在根目录下新建vue.config.js文件，加上
    module.exports={
     publicPath:'',
    }

**25.在vue中，什么时候可以操作dom?**

必须在mounted时候才能操作

**26.什么是mixin?**

使用公用的内容，达到指定或者所有的实例都共享这些内容。
    
     
    1） 混入对象的内容必须是一个对象。
    
    2） 当使用混入时，相同的内容都会合并。
    
    3） 数据对象如果有相同的，则以被混入的对象中data数据为准