Vue常见面试题
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节点，ssage还未替换。在mounted阶段，vue实例挂载完成，ssage 成功渲染。
更新前/后：当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数据双向绑定原理:
答：采用数据劫持结合发布者-订阅者模式的方式，通过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事件不生效，原因是什么？怎么解决？
答：原因：
ajax实例里面的函数
根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。