关于vue的面试题1
1、【高频】MVVM和MVC 区别是什么
MVC是传统的设计模式，
M代表model模型，就是数据的意思，
V代表视图，就是页面的意思，
controller控制器，在这里写js业务逻辑，把数据M渲染到视图V （有点类似与我们之前学习的，把数据渲染到页面）
MVVC是vue使用的设计模式
MVVM一种软件架构模式，决定了写代码的思想和层次
- M表示model数据模型，在vue实例对象的data里定义
- V表示view视图，是页面标签
- VM：ViewMode视图模型
MVVM通过数据双向绑定让数据自动的双向同步 不再需要操作DOM
- V（修改视图）->M(数据自动同步）
- M（修改数据）->V(视图自动同步）
2、【几乎必问】Vue中key值作用
提升vue渲染性能
1、vue在渲染的时候，会先把新DOM与旧DOM进行对比，如果dom结构一致，则vue会复用旧的dom。（此时可能造成数据渲染异常）
2、使用key可以给dom添加一个唯一标识符，让vue强制更新dom
3、【高频】Vue中：key作用，为什么不能用索引
因为用了索引和没用，没啥区别（用了等于没用）
1、：key是给v-for循环生成标签办法唯一标识的，用于性能的优化
2、因为v-for数据项的顺序改变，Vue也不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素
4、【高频】Vue中有时候数组会更新页面，有时候不更新，这是为什么
因为vue内部只能检测到数组顺序/位置的改变/数量的改变，但是值被重新赋予监测不到变更，可以用Vue.set（）/vm.$set()
这些方法会触发数组改变，v-for会检测到并更新页面
push() pop() shift() unshift() splice() sort() reverse()
这些方法不会触发v-for会监测到并更新页面
slice() filter() concat()
5、【高频】方法和计算属性和侦听器区别
方法：需要主动调用触发，不会缓存
计算属性：监听多个属性：只要计算属性内部数据变化就会触发；有缓存机制（必须要说）
侦听器：监听一个属性，不会缓存（这个可以不用回答）
6、【几乎必问】vue组件传值
父向子->props定义变量->父在使用组件用属性给props变量传值---单项数据流
子向父->$emit触发父的事件->父在使用组件用@自定义事件名=父的方法（子把值带出来）---事件监听
7【高频】Vue组件data为什么必须是函数
因为组件需要在多个地方使用
- 如果data是一个对象，对象是引用类型。一旦某个地方修改，就会全部修改
- data是一个函数，每一次复用组件的时候就会从这个函数返回一个对象，这样组件在复用的时候就可以做到数据互不干扰
8【高频】scoped作用与原理
作用：组件css作用域，避免子组件内部的css样式被父组件覆盖
默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式
原理：给元素添加一个自定义属性v-data-xxx，通过属性选择器来提高css权重值
9【超高频】vue生命周期总共分几个阶段
4个阶段8个钩子
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期
1、beforeCreate
在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用
2、created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event事件回到。然而，挂载阶段还没开始，$el属性目前不可见
3、beforeMount
在挂载开始之前被调用：相关的render函数首次被调用
4、mounted
el被创建的vm.el也在文档内
5、beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行
6、updated
由于数据更改导致的虚拟DOM 重新渲染和打补丁，在这之后会调用该钩子
7、beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用
8、destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
10、【高频】Vue的nextTick的原理是什么
1、为什么需要nextTick
vue 是异步修改DOM的并且不鼓励开发者直接接触DOM，但有时候业务需要必须对数据更改---刷新后的DOM做相应的处理，这时候就可以使用Vue.nextTick（callback）这个api了
2、知识储备
事件循环中宏任务和微任务这两个概念
常见的宏任务有script，setTimeout，setInterval，setImmediate（一种执行更加频繁的定时器）
常见的微任务有，Promise.then(),async
3、最终答案：
nextTick的原理是vue通过异步队列控制DOM更新
nextTick底层是promise，所以是微任务，这个一定要知道
nextTick回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多isNative()的判断，因为这里还存在兼容性降级的问题，可见Vue开发团队的深思熟虑，对性能的良苦用心
4、小科普：其实vue在版本更新的时候。 时而将nextTick封装成宏任务，时而将nextTick封装成微任务。 不过目前vue2最新的版本，nextTick底层是微任务
11、【高频】v-slot插槽与作用域插槽
1、插槽作用：父组件传递html结构给子组件
2、具名插槽作用：父组件传递多个html结构给子组件
3、作用域插槽作用：父组件给子组件传递插槽时，可以是使用子组件内部的数据
12、【高频】自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directive
钩子函数：bind（绑定事件触发）、inserted（节点插入的时候触发）、update(组件内相关更新）
钩子函数参数：el、binding
