10个常见的 VUE 面试题

1，vue循环中key的作用，

需要使用key来给循环中每个节点做一个唯一标识，要保证一个循环中key的值各不相同, 以避免vue中的重用机制造成可能的渲染异常.  从底层来看, key属性主要为了Diff算法就可以正确的识别此节点。并高效的更新虚拟DOM。

2.vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？

Vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。

v-model相当于 v-bind:value  加 v-on:input

3, vue中怎么实现非父子组件之间的传值？

在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。

大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。

也可以在路由跳转时,通过路由传值

4.vuex如何使用?

首先在项目中 npm install vuex 安装

新建vuex状态管理文件,导入vuex并添加状态数据

在组件中使用mapState()函数映射状态数据并使用

在组件中使用commit()函数提交申请修改状态数据

5,. Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？

state => 基本数据   在组件中使用mapState()函数把状态数据映射入组件即可使用

getters => 从基本数据派生的数据   我们在组件中使用 $store.getters获取数据

mutations => 提交更改数据的方法，同步！    我们在组件中使用 $store.commit('',params)修改数据

actions => 像一个装饰器，包裹mutations，使之可以异步。  使用mapAction()映射入组件使用

modules => 模块化Vuex

6.vue中v-if和v-show有什么区别

v-if的原理是根据判断条件来动态的进行增删DOM元素, 比较耗费性能和内存, 频繁显示隐藏不建议使用,建议使用于，有一定需要重新渲染的组件上，例如element的dialog组件，

v-show是根据判断条件来动态的进行显示和隐藏元素, 通过设置样式display为block和none来实现, 适用于频繁显示隐藏的情况

7，vue有哪些优缺点:

优点:

(1 简单好用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。

(2 单页面应用, 使用单文件组件结构, 用户体验好,

(3 性能比较好：相比其他框架, 它占用更少的空间，并提供更好的性能。

(4 基于MVVM模式, 数据驱动视图, 更高效

(5 适应性强：组件化设计可以提高开发效率,方便代码复用, 提升整个项目的可维护性

缺点:

(1, vue生态环境不如react和angular, 但有追赶和超越的趋势

(2, vue不支持IE8

(3, vue封装的比较深入,不利于seo优化, 报错不明显,

8.vue中虚拟DOM的实现原理  

虚拟DOM是通过js对象的结构来记录html标签节点, 当组件数据更新需要渲染视图时,先用diff算法计算变化前后js对象(也就是虚拟DOM树)结构的不同, 得到最小差异, 然后针对性的更新部分真实DOM节点, 这样可以极大提高视图渲染效率, 节省内存消耗

9,.简单叙述下封装 vue 组件的过程？

(1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(思考1小时，码码10分钟，程序猿的准则。)

(2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

(3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

(4. 封装完毕了，直接调用即可

10，vue项目怎么打包app  ?

(1 首先使用webpack打发布包, npm run build

(2 然后通过Hbuilder 新建H5+App项目

(3 把第一步打包出的dist文件夹导入项目

(4 在项目中的manifest.json文件中进行打包配置

(5 点击Hbuilder工具菜单栏发行中的 原生App-云打包