【必看】58 道 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度(中)

11.axios及安装?

答:请求后台资源的模块。npm install axios —save 装好, js中使用 import 进来,然后 .get 或 .post 。返回在 .then 函数中如果成功,失败则是在 .catch 函数中。

12.v-modal的使用

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

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

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

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

答:

  • computed : 当一个属性受多个属性影响的时候就需要用到 computed ,最典型的栗子:购物车商品结算的时候

  • watch : 当一条数据影响多条数据的时候就需要用 watch ,栗子:搜索数据

15.v-on可以监听多个方法吗?

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

16.$nextTick的使用

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

17.vue组件中data为什么必须是一个函数?

答:因为 JavaScript 的特性所导致,在 component 中,data 必须以函数的形式存在,不可以是对象。组建中的 data 写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的 data ,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个 data ,这样改一个全都改了。

18.渐进式框架的理解

答:主张最少;可以根据不同的需求选择不同的层级;

19.Vue中双向数据绑定是如何实现的?

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

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

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

多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新

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

单页面缺点:不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理);初次加载时耗时多;页面复杂度提高很多。

21.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 应该放到外层去。

22.assets和static的区别

答:相同点: assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点

不相同点:assets 中存放的静态资源文件在项目打包时,也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是 static 中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议: 将项目中 template需要的样式文件js文件等都可以放置在 assets 中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

23.vue常用的修饰符

答:

  • .stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡;

  • .prevent :等同于 JavaScript 中的 event.preventDefault() ,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);

  • .capture :与事件冒泡的方向相反,事件捕获由外到内;

  • .self :只会触发自己范围内的事件,不包含子元素;

  • .once :只会触发一次。

24.vue的两个核心点

答:数据驱动、组件系统

数据驱动: ViewModel,保证数据和视图的一致性。

组件系统: 应用类UI可以看作全部是由组件树构成的。

25.vue和jQuery的区别

答:jQuery是使用选择器( $ )选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val(); ,它还是依赖DOM元素的值。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

26. 引进组件的步骤

答: 在template中引入组件;在script的第一行用import引入路径;用component中写上组件名称。

27.delete和Vue.delete删除数组的区别

答:delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

28.SPA首屏加载慢如何解决

答:安装动态懒加载所需插件;使用CDN资源。

29.Vue-router跳转和location.href有什么区别

答:使用 location.href= /url 来跳转,简单方便,但是刷新了页面;使用 history.pushState( /url ) ,无刷新页面,静态跳转;引进 router ,然后使用 router.push( /url ) 来跳转,使用了 diff 算法,实现了按需加载,减少了 dom 的消耗。其实使用 router 跳转和使用 history.pushState() 没什么差别的,因为vue-router就是用了 history.pushState() ,尤其是在history模式下。

30. vue slot

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

耐心等待下次的分享欧。

原文地址:https://www.cnblogs.com/ZXH-null/p/12512745.html