vue面试题

1.为什么要选vue？与其它框架对比的优势和劣势？

• 优点

  • 易用

  已经会了 HTML、CSS、JavaScript？
  

  • 灵活

  1.拥有不断繁荣的生态系统(vue route, vuex,vue服务端渲染)
  2.可以使用一个库或者一个框架进行开发
  

  • 高效

  1.运行大小20kB,
  

• 缺点

1.不利于SEO优化.
2.首屏加载速度慢.加载时,将所有的css,js文件进行加载.
3.不支持IE678

2.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

MVVM(设计模式)
         * M:model 模型  V:view 视图  VM:ViewModel (视图模型)
         * 模型通过viewModel控制着视图,视图也可以通过viewModel修改模型,viewModel在这里起到中间件的作用.

3.vue等单页面应用及其优缺点

普通页面之间跳转: 就是真实的页面之间进行跳转(N.html)
单页面之间跳转:  始终只有一个页面(index.html)


优点:
	1.用户体验好.
	2.适合前后端分离
缺点:
	1.不利于SEO优化.
	2.首屏加载速度慢.加载时,将所有的css,js文件进行加载.

4.说出至少4种vue当中的指令和它的用法？

v-if:v-if:条件为真,则显示元素,条件为假,不显示元素
v-show: v-show:条件为真:显示元素,条件为假:通过样式中display为none,来隐藏元素
v-for:- 遍历数组- 遍历数值- 遍历字符串- 遍历对象
v-html:可以解析data数据中的标签--做富文本渲染
v-text:不会出现闪屏问题不能解析data数据中的标签--做标签内容展示
v-model:通过v-model指令做数据的双向绑定
v-bind:避免变成字符串

5.v-if 和 v-show 区别

相同点:都是控制元素的显示和隐藏.
		条件为真,都是显示元素
不同之处:
	条件为假: v-if:直接隐藏元素,(惰性模式)
			v-show:通过样式display:none
应用:
	1.如果页面一旦加载完成之后,数据几乎不会发生改变(建议使用v-if)
	2.数据频繁切换时(建议使用v-show,[选项卡])

6.常用的事件修饰符都有哪些？分别说明它们的作用。

.prevent:阻止默认事件
 .stop ：阻止事件传播修饰符
 .capture ：用来改变触发事件的顺序
这几个都是键盘事件，通过按键来控制事件
 .up 
 .down
 .enter 
 .13
 .left 
 .right

7.什么是Vue的生命周期？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能
的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的
钩子函数可以实现组件数据管理和DOM渲染两大重要功能

8.解析Vue生命周期中各个钩子函数分别在什么场景下执行

beforeCreate   创建之前
created 创建完成
beforeMount 挂载之前
mounted 挂载完成
beforeUpdate  更新之前
updated 更新完成
beforeDestroy 销毁之前
destroyed 销毁完成

9.说明watch和computed的作用与区别

watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()
 
watch  属性监听 监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用
computed:计算属性通过属性计算而得来的属性，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
 
watch擅长处理的场景：一个数据影响多个数据；
computed擅长处理的场景：一个数据受多个数据影响。

10.说明watch和methods的作用与区别

watch .是观察的动作，自动执行
methods 是方法，主动调用

11.Vue中过滤器如何定义和使用？

定义：
对部分数据进行特殊处理,显示在视图中
使用：
全局过滤器:在任何vue实例中都可使用
布局过虑器:只在当前vue实例中使用

12.使用过滤器实现实现日期的格式化，只显示年月日

13过渡动画在什么场景下使用？有哪几个内置的类名？

系统提供了6个内置的类名
.v-enter   进入之前
.v-enter-active  进入过程
.v-enter-to 进入结束
.v-leave  离开之前
.v-leave-active  离开过程
.v-leave-to  离开结束

需要结合标签transition来使用,如果没有设置name属性,默认.v-  如果设置了name属性,使用类名: .name属性值-

14.vue中遇到bug？

1.如果使用{{}}，首屏会出现闪屏，用v-text解决
2.使用深度监听，可能会造成页面卡顿。解决：转成简单类型，进行监听
3.在vue中，不推荐v-for和v-if同时使用。如果需要同时使用，记得使用computed解决
4.数组或者json变了，页面不渲染。解决：Vue.set() vm.$set() ,如果是数组，还可以使用splice

15.字符串：slice substring substr,padStart padEnd indexOf includes

slice(start,end)提取字符串中介于两个指定下标的字符，包括开始下标，不包括结束下标
substring(start,end)提取字符串中介于两个指定下标的字符，包括开始下标，不包括结束下标
substr(start,length):从那个开始，截取几个
padStart：如果某个字符串不够指定长度，会在头部补全
 padEnd：如果某个字符串不够指定长度，尾部补全
 indexOf：查询一个字符串，在另一个字符串中首次出现的位置，出现返回对应得下标，没有返回-1
 includes() 方法用于判断字符串是否包含指定的子字符串，如果找到匹配的字符串则返回 true，否则返回 false。
 

16.时间对象：Date.now()

17.arr:splice push forEach map every some filter slice

splice（start,deleteCount,item）:删除数组中的一组元素,使用item进行替换，start开始的下标，deleteCounts删除几个默认是删除到最后
push：在数据的末尾添加一个或者多个元素
forEach:循环数组
map：循环数组，返回的值会组成一个新的数组
every:针对于数组进行判断，如果结果都为true，最后才为true
some：针对于数组，只要有一个为true，最后为true
filter:针对于数组，满足条件的会组成一盒新的数组
slice(start,end):截取元素

17.列举出在vue中组件的定义方式有哪几种？

局部注册组件
全局注册组件

18.组件中的data为什么必须是函数？

.data数据复用在任何地方,当一处数据修改时,不影响其他地方使用的data数据
每复用一次data数据,可返回一个新的数据,不影响其他地方返回的data数据.

19.vue-cli中怎样定义和使用组件？

cli:command-line-interface(命令行接口)

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

src
	-assets #静态资源文件css js img
		注意:
			1.assets静态资源文件参与压缩打包
			2.assets静态资源文件需要在main.js中引入
	-components #公共的组件
	-pages	#你的代码  功能模块
	-utils	#工具类
	-filters #全局过滤器
	-store	#状态管理
	-router #路由
	App.vue	#根组件
	main.js	#唯一入口文件

21.vue中的 ref是什么？如何使用ref？

ref是用来获取素或者子组件的句柄。

22.vue中如何使用jquery？

npm i jquery --save安装
然后局部使用或者全局使用

23.说说你对 slot 的理解有多少？slot 使用场景有哪些？

slot槽口中没有name属性为,匿名槽口.
slot槽口中有name属性为,具名槽口.
槽口外部向内部传递数据

24.vue的is这个属性你有用过吗？主要用在哪些方面？

作用:解决标签的固定搭配问题

25.props数据和data数据的区别

props数据来自外部
如果props数据类型是基本数据类型(String,Number,Boolean),那么不能重写
如果props数据类型是引用数据类型(Array,Object),那么可以重写
data数据是组件内部的数据
data数据可读可写
注意:props和data数据名不能相同.