Vue面试题2

1：vue.js的两个核心是什么？

答:数据驱动和组件化。

2：vue生命周期钩子函数有哪些？

答:总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

3：第一次页面加载会触发哪几个钩子？

答：会触发下面这几个beforeCreate, created, beforeMount, mounted 。

4：详细介绍每个生命周期钩子函数

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$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结构依然存在

5：请问 v-if 和 v-show 有什么区别？

答：不同点：

a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；

c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；

6：vue中 key 值的作用

答：使用key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

7：Vue 组件中 data 为什么必须是函数？

答：在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

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

答： v-if(判断是否隐藏)

v-for(把数据遍历出来)

v-bind(绑定属性)

v-model(实现双向绑定)

9：vue数据双向绑定原理:理解VUE2双向数据绑定原理和实现 - 简书

答：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

10：mvc和mvvm的理解

答：MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

11：vue中组件传值的方式

答：1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数

2:非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

12：怎么封装组件

答：封装组件：主要是为了解耦，具备高性能、低耦合，在通用组件的时候要留一个插槽

第一步：在compoents文件夹中新建一个vue文件

第二步：在main.js中全局引入，先import，再注册到VUE中

第三步：在任何页面直接使用自己定义的组件

13:params和query的区别

答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据,params刷新会丢失params里面的数据。

14:vue-router 有哪几种导航钩子?

答：三种:
        第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
        第二种：组件内的钩子
        第三种：单独路由独享组件

15:$route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

16：vue-router的两种模式

答:hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

17:vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
        state => 基本数据(数据源存放地)
        getters => 从基本数据派生出来的数据
        mutations => 提交更改数据的方法，同步！
        actions => 像一个装饰器，包裹mutations，使之可以异步。
        modules => 模块化Vuex

18:分别简述computed和watch的使用场景

答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子：购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

19:$nextTick的使用

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

20:delete和Vue.delete删除数组的区别

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

21:keep-alive内置组件的作用

答：可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

22:怎么定义vue-router的动态路由？怎么获取传过来的值？

答：动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{

path: '/details/:id'

name: 'Details'

components: Details

}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数：this.$route.params.id

23:vue给自定义组件添加click事件不生效，原因是什么？怎么解决？

答：原因：

根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。

解决：

1：参照官方文档，可以用@click.native=“click”解决

2：可以用：将事件传递至组件内，也符合组件间的单向数据流，

主组件写法：

被调用组件写法：将click绑定在自定义组件内部想要click的地方

3：使用$emit来实现事件传递

24:vue-loader是什么？使用他的用途有哪些？

答：vue-loader是解析 .vue 文件的一个加载器，跟 template/js/style转换成 js 模块；

用途：js可以写es6、style样式可以scss或less；template可以加jade等；

25：active-class是哪个组件的属性？

答：vue-router模块的router-link组件。

26:vue-router懒加载怎么实现？

答：为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

如何实现？