Vue常见面试题
1、Vue优点?
(1)轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;
(2)简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
(3)双向数据绑定:保留了angular的特点,在数据操作方面更为简单;
(4)视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
(5)虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
(6)组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
2、Vue父向子组件传递数据?
通过props属性
3、子向父组件如何传递事件?
通过$emit方法
4、说出几种常见的Vue指令和用法?
v-model双向数据绑定;
v-for循环;
v-if v-show 显示与隐藏;
v-on事件;v-once: 只绑定一次。
5、vue-loader是什么? 使用它的用途有哪些?
vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等。
6、v-modal的使用?
- v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
- v-bind绑定一个value属性;
- v-on指令给当前元素绑定input事件。
7、Vue中数据双向绑定是如何实现的?
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。
8、Vue常用的修饰符
- stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡;
- prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
- capture:与事件冒泡的方向相反,事件捕获由外到内;
- self:只会触发自己范围内的事件,不包含子元素;
- once:只会触发一次。
9、Vue的两个核心
数据驱动、组件系统
- 数据驱动:ViewModel,保证数据和视图的一致性。
- 组件系统:应用类UI可以看作全部是由组件树构成的。
10、Vue和jQuery的区别?
- jQuery是使用选择器(
$
)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val()
;,它还是依赖DOM元素的值。 - Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
11、引进组件的步骤
- 在template中引入组件;
- 在script的第一行用import引入路径;
- 用component中写上组件名称。
12、Vue生命周期的理解?
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
- 创建前/后: 在beforeCreated阶段,vue实例的挂载元素 e l 和 ∗ ∗ 数 据 对 象 ∗ ∗ d a t a 都 为 u n d e f i n e d , 还 未 初 始 化 。 在 c r e a t e d 阶 段 , v u e 实 例 的 数 据 对 象 d a t a 有 了 , el和**数据对象**data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了, el和∗∗数据对象∗∗data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有。
- 载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
- 更新前/后:当data变化时,会触发beforeUpdate和updated方法。
- 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。
13、MVVM框架是什么?
- vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
14、(1)vue-router是什么?(2)它有哪些组件?(3)怎么定义 vue-router 的动态路由? 怎么获取传过来的值?
- vue用来写路由一个插件。
- router-link、router-view
- 在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id。
15、vuex是什么?怎么使用?哪种功能场景使用它?
vue框架中状态管理。在main.js引入store,注入。
新建了一个目录store.js,…… export 。
场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
16、vuex有哪几种属性?
- 有五种,分别是 State、 Getter、Mutation 、Action、 Module
- state => 基本数据(数据源存放地)
- getters => 从基本数据派生出来的数据
- mutations => 提交更改数据的方法,同步!
- actions => 像一个装饰器,包裹mutations,使之可以异步。
- modules => 模块化Vuex
17、v-show和v-if指令的共同点和不同点?
- 共同点:都能控制元素的显示和隐藏;
- 不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。