-
vue
常见面试题和答案
优点？
答：
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十
kb
；
简单易学：国人开发，中文文档，不存在语言障碍
，易于理解和学习；
双向数据绑定：
保留了
angular
的特点，在数据操作方面更为简单；
组件化：保留了
react
的优点，实现了
html
的封装和重用，在构建单页
面应用
方面有着独特的优势；
视图，
数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，
只需要操作数据
就能完成相关操作；
虚拟
DOM
：
dom
操作是非常耗费性能的，
不再使用原生的
dom
操作节点，
极大解放
dom
操作，但
具体操作的还是
dom
不过是换了另一种方式；
运行速度更快
:
相比较与<
/p>
react
而言，同样是操作虚拟
dom
，就性能而言，
vue
存在很大的优势
。
父组件向子组件传递数据？
答：通过
props
3.
子组件像父组件传递事件？
答：
$$emit
方法
4.v-show
和
v-if
指令的共同点和不同点？
答
:
共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同，
v-show
本质就是通过控制
css
中的
display
设置
为
none
，控制隐
藏，只会编译一次；
v-if
是动态的向
DOM
树内添加或者删除
DOM
元素
，若初始值为
false
，就不会编译了。而且
v-if
不停的销毁和创建比
较消耗性能。
总结：如果要频繁切换某节点，使用
v-sho
w(
切换开销比较小，初始开销较大
)
。
如果不需要频繁切换某节点使用
v-if
（初始渲染开销较小，切换开销比较大）。
5.
如何让
CSS
只在当前组件中起作用？
答：在组件中的
style
< br>前面加上
scoped
6.
的作用是什么
?
答
:keep-alive
是
Vue
内置的一个组件，可以使被包含的组件保留状态，或避
免重新渲染。
7.
如何获取
dom?
答：
ref=
用法：
this.$$e
8.
说出几种
vue
当中的指令和它的用法？
答：
v-model
双向数据绑定；
v-for
循环；
v-if v-show
显示与隐藏；
v-on
事件；
v-once:
只绑定一次。
9. vue-
loader
是什么？使用它的用途有哪些？
答：
vue
文件的一个加载器，将
template/js/style
转换成
js
模块。
用途：
js<
/p>
可以写
es6
、
style
样式可以
scss
或
less
、
template
可以加
jade
等
10.
为什么使用
key?
答：
需要使用
key
来给每个节点做一个唯一标识，
Diff
算法就可
以正确的识别此
节点。
作用主要是为
了高效的更新虚拟
DOM
。
及安装
?
答：请求后台资源的模块。
npm install
axios --save
装好，
j
s
中使用
import
进来，然后
.get
或
.post
。返回在
.then
函数中如果成功，失败
则是在
.catch
函数中。
12.v-modal
的使用。
答：
v-model
用于表单数据的双向绑
定，其实它就是一个语法糖，这个背后就
做了两个操作：
v-bind
绑定一个
value
属性；
v-on
指令
给当前元素绑定
input
事件。
<
/p>
13.
请说出
项
目中
src
目录每个文件夹和文件的用法？
答：
assets
文件夹是放静
态资源；
components
是放组件；
router
是定义路由
相关的配置
;
是一个应用主组件；
是入口文件
。
14.
分别简述
< br>computed
和
watch
的使用场景
答：
computed:
当一个属性受多个属性影响的时候就需要用到
computed
最典型的栗子：
购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用
watch
栗子：搜索数据
15.v-on
可以监听多个方法吗？
答
：
可
以
，
栗
子
：
type=
v-on=
。
16.$$nextTick
的使用
<
/p>
答：当你修改了
data
的值然后马上获
取这个
dom
元素的值，是不能获取到更
新后的值，
你需要使用
$$next
Tick
这个回调，让修改后的
data
值渲染更新到
dom
元素之
后在获取
，才能成功。
组件中
data
为什么必须是一个函数？
< br>答：因为
JavaScript
的特性所导致，在
component
中，
data
必须以函数的形
式存在，不可以是对象。
组建中的
data
写成一个函数，数据以函数返回值的形式定义，这样每次复
用组件的时候，都会返回一份新的
data
，相当于每个组
件实例都有自己私有的
数据空间，
它们只负责各自维护的数据，
不会造成混乱。
而单纯的写成对象形式，
就是所有的组件实例共用了一个
data
，这样改一个全都改
了。
18.
渐进式框架的理解
答：主张最少；可以根据不同的需求选择不同的层级；
中双向数据绑定是如何实现的？
答：
vue
双向数据绑定是通过
数据劫持
结合
发布订阅模式的方式来实现的，
也就
是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随
之发生改变；
核心：关于
VUE
< br>双向数据绑定，其核心是
Property()
方法。
20.
单页面应用和多页面应用区别及优缺点
答：单页面应用（
SPA
），通俗一点
说就是指只有一个主页面的应用，浏览器一
开始要加载所有必须的
html, js, css
。
所
有的页面内容都包含在这个所谓的主页
面中。但在写的时候，还是会分开写（页面片段）
，然后在交互的时候由路由程
序动态载入，单页面的页面跳转，仅刷新局部资源。多应用
于
pc
端。
多页面（
MPA
），就是指一个应用中有多个页面，页面跳转时
是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点
s
pa
对服
务器压力较小；
前后端分离；
页面效果会比较炫酷
（比如切换页面内容时的专场
动画）。
单页面缺点：
不利于
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
应该放到外层去。
和
static
的区别
答
：相同点：
assets
和
stati
c
两个都是存放静态资源文件。项目中所需要的资
源文件图片，
字体图标，样式文件等都可以放在这两个文件下，这是相同点
不相同点：
assets
中存放的静态资源文件在项目打包时，
也就是运行
npm
run
buil
d
时会将
assets
中放置的静态资
源文件进行打包上传，
所谓打包简单点可以
理解为压缩体积，代
码格式化。而压缩后的静态资源文件最终也都会放置在
static
文件中跟着
一同上传至服务器。
s
tatic
中放置的静态资源文件
就不会要走打包压缩格式化等
流程，
而是直接进入打包好的目录，
直接上传至服
务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是
st
atic
中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于
assets
中
打包后的文件提交较大点。在服务
器中就会占据更大的空间。
建议：将项目中
< br>template
需要的样式文件
js
< br>文件等都可以放置在
assets
中，
< br>走打包这一流程。
减少体积。
而项目中引入的第三方的资
源文件如
等文件可以放置在
stati
c
中，
因为这些引入的第三方文件已经经过处理，
我们不
再需要处理，直接上传。
常用的修饰符
答：
.stop
：等同于
JavaS
cript
中的
opagation()
，防止事件冒泡；
.prevent
：
等同于
JavaScript
中的
tDefault()
，
防止执行预设
的行
为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture
：与事件冒泡的方向相反，事件
捕获由外到内；
.self
：只会触
发自己范围内的事件，不包含子元素；
.once
：只会触发一次。
的两个核心点
答：数据驱动、组件系统
数据驱动：
ViewModel
，保证数据和视图的一致性。
组件系统：应用类
UI
可
以看作全部是由组件树构成的。
和<
/p>
jQuery
的区别
< br>答：
jQuery
是使用选择器（
$$
）选取
DOM
对象，对其进行赋值
、取值、事件
绑定等操作，
其实和原生的
HTML
的区别只在于可以更方便的选取和操作
DOM
对
象
，
而
数
据
和
界
面
是
在
一
起
的
。
比
如
需
要
获
取<
/p>
label
标
签
的
内
容
：
$$(
它还是依赖
DOM
元素的值。
Vue
则是通过
Vu
e
对象将数据和
View
完全分离开来
了。对数据进行操作不再
需要引用相应的
DOM
对象，可以说数据和
View
是分离的，他们通过
Vue
对
象这个
v
m
实现相互的绑定。这就是传说中的
MVVM
< br>。
26.
引进组件的步骤
答
:
在
te
mplate
中引入组件；
在
script
的第一行用
import
引入路径；
用
co
mponent
中写上组件名称。
<
/p>
和
删除数组的区别
答：
delete
只是被删除的元
素变成了
empty/undefined
其他的元素的键值还
是不变。
直接删除了数组
改变了数组的键值。
首屏加载慢如何解决
答：安装动态懒加载所需插件；使用
CDN
资源。
-router
跳转和
< br>
有什么区别
答：使用
='/url'
来跳转，简单方便，但是刷新了页面；
< br>
使用
ate('/url')
，无刷新页面，静态跳转；
引进
ro
uter
，然后使用
('/url')
来跳转，使用了
diff
算法，实现了按
需加载，减少了
dom
的消耗。
<
/p>
其
实
使
用
router
跳
转
和
使
用
ate()
没
什
么
差
别
的
，
因
为