1.为什么使用虚拟DOM
- 创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
- 触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
- 虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。
- Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。
2.Vue组件通信
父组件向子组件传值
父组件发送的形式是以属性的形式绑定值到子组件身上。
然后子组件用属性props接收
在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制
子组件向父组件传值
子组件用$emit()触发事件
$emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据 $(event)来接收
父组件用v-on 缩写为@ 监听子组件的事件
兄弟之间的传递
兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
提供事件中心 var hub = new Vue()
- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
- 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
- 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
3.Vue中key是用来做什么的？为什么不推介使用index作为key？
- key的作用主要是为了高效的更新虚拟DOM（使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素）
- 当以数组的下标index作为index值时，其中一个元素（如增删改查）发生了变化就有可能导致所有元素的key值发生变化
4.什么是生命周期：
从Vue实例创建、运行、到销毁期间，伴随着的各种事件，这些事件统称为生命周期
生命周期函数分类
- 创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性
- created：实例已经在内存中创建出来，此时的data和methods以及创建完成，但是还没有开始编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面上
mounted：已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
- 销毁期间的生命周期函数：
注意 ！！！vue3，则是beforeunmount和unmount
- beforeDestory：实例销毁之前调用，在这一步，实例仍然完全可用
- destroyed：Vue实例销毁之后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
5.v-show和v-if的区别
- v-show原理是修改元素的css属性display:none来决定是显示还是隐藏
- v-if则是通过操作DOM来进行切换显示
6.双向数据绑定
实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
7.Vue导航守卫的钩子函数有哪些？
全局守卫
- router.beforeEach：全局前置守卫，进入路由之前
- router.beforeResolve：全局解析守卫，在beforeRouteEnter调用之后调用
- router.afterEach：全局后置钩子，进入路由之后
路由组件内的守卫 - beforeRouteEnter()：进入路由前
- beforeRouteUpdate()：路由复用同一个组件时
- beforeRouteLeave()：离开当前路由时
8.vue编程式的导航跳转传参的方式有哪些？
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})9.vuex是什么？怎么使用？哪种功能场景使用它？
在main.js引入store，注入。新建了一个store目录，然后….. export 。 场景：单页应用中，组件之间的共享状态和方法 state Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。 mutations mutations定义的方法动态修改Vuex 的 store 中的状态或数据。 getters 类似vue的计算属性，主要用来过滤一些数据。 action actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。 modules 项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
10.mvc和mvvc的区别
- MVC
- MVC 包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。
- View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈
- MVVM
- MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。
- 采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。 mvvm代表框架：Angularjs、React、Vue mvvm主要解决了mvc中大量 dom操作使得页面渲染性能降低，加载速度变慢，影响用户体验
11.说出至少vue 3个常用事件修饰符?
- .stop 阻止点击事件冒泡
- .prevent 阻止默认事件
- .once 只执行一次
- .self 只在元素本身触发
12.vuex有哪几种属性
- state：vuex的基本数据，用来存储变量
- geeter：从基本数据(state)派生的数据，相当于state的计算属性
- mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
- action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。