vue面试题
1、怎么理解mvvm这种设计模式
Model–View–ViewModel （MVVM） 是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式。
MVVM
M Model 模型 指的是数据层
V View 视图 指的是用户页面
VM ViewModel 视图模型
视图模型是MVVM模式的核心，它是连接view和model的桥梁，MVVM实现了view和model的自动同步，当model的属性改变时，我们不用自己手动操作DOM元素，来改变view的显示，反之亦然，我们称之为数据的双向绑定。
2、v-if和v-show的区别，使用场景区别
v-if和v-show看起来似乎差不多，当条件不成立时，其所对应的标签元素都不可见，但是这两个选项是有区别的:
1、v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。
2、v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS（display）切换。
3、 v-if适用于不需要频繁切换元素显示和隐藏的情况
v-show适用于需要频繁切换元素的显示和隐藏的场景。
3、事件修饰符和按键修饰符有哪些
事件修饰符：
.prevent 阻止事件默认行为
.stop 阻止事件冒泡
.capture 设置事件捕获机制
.self 只有点击元素自身才能触发事件
.once 事件只触发一次
按键修饰符：
.tab
.enter
.esc
.space
.delete(捕获"删除"和"空格"键)
.up
.down
.left
.right
4、v-model修饰符有哪些
.trim 去除首尾空格
.lazy 只在输入框失去焦点或按回车键时更新内容，不是实时更新
.number 将数据转换成number类型(原本是字符串类型)
5、v-for中为什么要加key
作用：
1.key的作用主要是为了高效的更新虚拟DOM，提高渲染性能。
2.key属性可以避免数据混乱的情况出现。
原理：
1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法
2.当页面数据发生变化时，Diff算法只会比较同一层级的节点；
3.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；
如果节点类型相同，则会重新设置该节点属性，从而实现节点更新
4.使用key给每个节点做一个唯一标识，Diff算法就可以正确失败此节点，"就地更新"找到正确的位置插入新的节点。
6、v-for和v-if的优先级
v-for优先级高于v-if
如果同时出现v-for和v-if，无论判断条件是否成立，都会执行一遍v-for循环，这样浪费性能，所以要尽可能的避免两者一起使用。
7、组件中的data为什么是函数,new Vue 实例里，data 可以直接是一个对象
1、组件是用来复用的，组件中的data写成一个函数,数据以函数返回值形式定义,函数有独立的作用域，这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。
2、而单纯的写成对象形式,由于对象是引用类型，就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
3、因为new vue里面的代码是不存在复用的情况，所以可以写成对象形式
8、computed和watch的区别是什么
计算属性computed：
1、支持缓存，只有依赖数据发生改变，才会重新进行计算
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3、如果computed需要对数据修改，需要写get和set两个方法，当数据变化时，调用set方法。
4、computed擅长处理的场景：一个数据受多个数据影响，例如购物车计算总价
侦听属性watch：
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
3、immediate：组件加载立即触发回调函数执行
4、deep:true的意思就是深入监听，任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑
5、watch擅长处理的场景：一个数据影响多个数据，例如搜索框
9、组件化和模块化的区别
1、组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
2、模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。
10、怎么理解vue中的虚拟DOM
原理：
用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
好处：
1、性能优化
2、无需手动操作DOM
3、可以跨平台，服务端渲染等
11、怎么理解vue的生命周期
vue的生命周期：vue实例从创建到销毁的全过程，这个过程可以分为3个阶段
第一阶段：初始化阶段 创建vue实例,准备数据,
第二阶段：挂载阶段 准备模板,渲染视图
第三阶段：数据更新阶段 当数据变化时，会进行新旧DOM的对比，对比出差异的部分，进行差异化更新。
第四阶段：实例销毁阶段 当vm.$destroy()被调用，vue实例就会被销毁，释放相关资源，此时再更新数据，视图不会再变化。
12、vue 钩子函数有哪些，有哪些使用的场景
1、各阶段包含钩子：
beforeCreate 在data数据注入到vm实例之前，此时vm身上没有数据
created 在data数据注入到vm实例之前，此时vm身上有数据
beforeMount 生成的结构替换视图之前，此时DOM还没更新
mounted 生成的结构替换视图之前，此时DOM已经更新完成
beforeUpdate 数据变化了，dom更新之前
updated 数据变化了，dom更新之后
activated 被keep-alive缓存的组件激活时调用
deactivated 被keep-alive缓存的组件停用时调用
beforeDestroy 实例销毁，是否资源之前
destroyed 实例销毁，是否资源之后
这些钩子函数会在vue的生命周期的不同阶段，自动被vue调用
2、常用的钩子函数使用场景：
beforeCreate 做loading的一些渲染
created 结束loading， 发送数据的请求，拿数据
mounted 可以对dom进行操作
updated 监视数据的更新
beforeDestroy 销毁非vue资源，防止内存泄漏，例如清除定时器
activated 当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。
3、vue组件传值的方式
1、父传子
通过props传递
父组件： <child :list = 'list' />、
子组件: props['list'],接收数据,接受之后使用和data中定义数据使用方式一样
2、子传父
在父组件中给子组件绑定一个自定义的事件，子组件通过$emit()触发该事件并传值。
父组件： <child @receive = 'getData' />
getData(value){value就是接收的值}
子组件: this.$emit('receive',value)
3、兄弟组件传值
通过中央通信 let bus = new Vue()
A组件：methods :{
sendData(){
bus.$emit('getData',value)
} 发送
B组件：created(){
bus.$on(‘getData’,(value)=>{value就是接收的数据})
} 进行数据接收
14、vue是如何获取DOM
1、先给标签设置一个ref值，再通过this.$refs.domName获取，这个操作要在mounted阶段进行。
2、例如：
<template>
<div ref="test"></div>
</template>
mounted(){
const dom = this.$refs.test
}
15、v-on可以监听多个方法吗
可以
例如：
<input type="text" v-on="{ input:onInput,focus:onFocus }">
16、谈谈你对slot的了解
1、什么是插槽
1.1 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
1.2 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
2、插槽使用
2.1 默认插槽 在子组件中写入slot，slot所在的位置就是父组件要显示的内容
2.2 具名插槽 在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer
在父组件中使用template并写入对应的slot名字来指定该内容在子组件中现实的位置
2.3 作用域插槽 在子组件的slot标签上绑定需要的值<slot :data="user"></slot>
在父组件上使用slot-scope=“user”来接收子组件传过来的值
17、vue中动态组件如何使用
1、在某个中使用 is 特性来切换不同的组件：
<component :is="TabComponent"></component> TabComponent:已注册组件的名字
18、router和route的区别
1、$router对象
1）$router对象是全局路由的实例，是router构造方法的实例
2）$router对象上的方法有：push()、go()、replace()
2、$route对象
1）$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等
2）$route对象上的属性有：path、params、query、hash等等
19、路由传参的方式和区别
答:
1、方式：params 和 query
2、区别：1）params用的是name，传递的参数在地址栏不会显示，类似于post
2）query用的是path,传递的参数会在地址栏显示出来，类似于get
3、举例说明：
1）params 传参
传： this.$router.push({
name: 'particulars',
params: {
id: id
}
})
接：this.$route.params.id
2）query传参
传：this.$router.push({
path: '/particulars',
query: {
id: id
}
})
接：this.$route.query.id
20、Vue-router 路由有哪些模式
一般有两种模式：
1、hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。
2、history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
21、在使用计算属性的时,函数名和data数据源中的数据可以同名吗?
不可以
在初始化vm的过程，因为不管是计算属性还是data还是props 都会被挂载在vm实例上，会把data覆盖了,因此 这三个都不能同名
22、vue中data的属性可以和methods中的方法同名吗?
不可以
vue源码中的 initData() 方法会取出 methods 中的方法进行判断，如果有重复的就会报错
23、你知道style加scoped属性的用途和原理吗
用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式.
scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的。
24、怎么解决vue动态设置img的src不生效的问题
因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。
<img :src="require('@/assets/images/xxx.png')" />
25、EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢
原因：因为我们的事件是全局的，它并不会随着组件的销毁而自动注销，需要我们手动调用注销方法来注销。
解决：我们可以在组件的 beforeDestroy ,或 destroy 生命周期中执行注销方法，手动注销事件
25、你认为vue的核心是什么
组件化
双向数据绑定
27、在.vue文件中style是必须的吗？那script是必须的吗
在.vue 文件中，template是必须的，而script与style都不是必须的。都没有的话那就是一个静态网页
28、说说vue的优缺点
优点：
1.数据驱动
2.组件化
3.轻量级
4.SPA(单页面)
5.版本3.0的界面化管理工具比较好使
6.vue易入门
7.中文社区强大，入门简单，提升也有很多的参考资料。
缺点：
1.不支持IE8及以下浏览器
2.吃内存（每个组件都会实例化一个Vue实例，实例的属性和方法很多）
3.定义在data里面的对象，实例化时，都会递归的遍历转成响应式数据，然而有的响应式数据我们并不会用到，造成性能上的浪费
