一些前端的面试题（后续继续补充）

MVC
Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据
View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的
Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据
MVVM
M：对应于MVC的M
V：对应于MVC的V
VM：ViewModel，是把MVC里的controller的数据加载，加工功能分离出来
MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）
//
Vue 并没有完全遵循 MVVM 的思想
这是因为从严格意义上来讲，MVVM要求View与Model是不能直接通信的，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。
//
vue的优缺点是什么？
vue的优点
简单易用、渐进式开发、轻量高效、MVVM模式、组件化
vue的缺点
生态系统不够完善、可扩展性稍差、
所有js文件都在index.hrml中引入，导致首次加载过慢
如何解决首屏加载过慢  
对于一些不需要首屏加载的页面进行懒加载模式
//
jq和vue区别
1.从jquery到vue的转变是一个思想想的转变，就是将原有的直接操作dom的思想转变到操作数据上去。
2.传统前端开发模式中是以jq为核心的，而vue是现在一个兴起的前端js库，是一个精简的MVVM。
3.jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，他和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。 
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的
4.vue适用的场景：复杂数据操作的后台页面，表单填写页面
jquery适用的场景：一些html5的动画页面，一些需要js来操作页面样式的页面
//
生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段
分别有：
创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数
创建后：Created() 是最早使用data和methods中数据的钩子函数
挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树
挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步
更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的
更新后：Updated() 内存和页面都是新的
销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
销毁后：Destroyed() 已经销毁完毕

Vue3.0中的生命周期做了一些改动：
beforeCreate  -> setup()    开始创建组件之前，创建的是data和method
created       -> setup()
beforeMount   -> onBeforeMount    组件挂载到节点上之前执行的函数。
mounted       -> onMounted    组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate    组件更新之前执行的函数。
updated       -> onUpdated    组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount    组件挂载到节点上之前执行的函数。
destroyed     -> onUnmounted    组件卸载之前执行的函数。
//
内置组件有哪些？功能分别是什么？
Keep-alive    包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
Template     空标签
Transition    为组件的载入和切换提供动画效果
Transition-gronp   作为多个元素/组件的过渡效果
Component    渲染一个‘元组件’为动态组件
Slot      作为组件模板之中的内容分发插槽，slot元素自身将被替换
//
6.vue组件通信方式有哪些？
  1.父传子：
在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:["属性名"]  props:{属性名:数据类型}
2.子传父：
在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数
3.兄弟组件传值：
通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件
4.$attrs和$listeners
如果父组件A下面有子组件B，组件B下面有组件C,这个时候A组件想要传数据给C组件就可以用这种方式实现。适合用于多级组件嵌套传值
在b组件中使用组件c的时候用v-bind绑定一个属性$attrs这样就可以直接在c组件中拿到父组件a传下来的数据了。用v-on绑定一个$listeners属性就可以直接在组件c里调用a组件的方法了。
5.provider和inject
父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，都可以通过inject来调用provide的数据
但是这种写法传递的数据是不响应的。
6.v-model也能实现组件传值
给子组件绑定v-model，其实是value属性和input事件的合写，在子组件中通过emit调用input事件就能修改父组件的v-model值
7.$parent和$children
在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.$children是一个数组 用的时候加下标
8.Vuex
vuex也可以实现组件之间的传值，把公共的数据放在state中，所有的组件都可以使用
//
四、Vuex
1.vuex ：是专门为vue.js开发的状态管理器，用集中式存储所有组件状态，vuex可以解决组件间的数据共享问题，也方便管理和维护
有五个属性分别是： state、getters、mutations、actions、module
state属性： 存放状态，例如你要存放的数据
getters：计算属性 可以通过this.$store.getters来获取存放在state里面的数据
mutations： 唯一能改变state的状态就是通过提交mutations来改变this.$store.commit()
actions: 异步的mutations，可以通过dispatch来分发从而改变state里面的事件中有context参数，是vuex的实例对象
module : 分模块处理，
3.高级用法-数据持久化
vuex里面存放的数据，页面一经刷新会丢失：
解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；
在vuex中可以通过安装vuex-persistedstate 插件，进行持久化的配置就行
4.高级用法-辅助函数（语法糖）
1. 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3. 如何使用： mapState需要调用到计算属性compute里
Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
//
7.vuex的工作（执行）流程是什么？

通过diapatch触发action去提交修改数据的操作，在action中通过commit调用mutation去修改数据，mutation接受commit的请求让mutation去修改state里的数据
//
computed和watch的区别
「computed：」  是计算属性，依赖其它属性值， computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed  的值；
支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
「watch：」  更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，
「watch和computed各自处理的数据关系场景不同:」
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响
//
vue最低兼容哪个版本
vue2兼容IE8以上版本，IE8及以下版本不支持Object.defineProperty方法，但这个是vue实现响应式的所必须的。
//
Vue 的父组件和子组件生命周期钩子函数执行顺序？
加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
//
父组件可以监听到子组件的生命周期吗？
第一种可以使用$emit来实现
第二种可以使用@hook来实现
//
直接给一个数组项赋值，Vue 能检测到变化吗？
看过源码应该都知道这是不能的，因为Vue2对数组的劫持本质上是劫持数组原型上的那七个方法，所以只有通过调用这七个方法中的其中一个Vue才能够监测到变化。
但我们可以通过调用set或$set来来触发视图更新
「vm.$set 的实现原理是：」

如果目标是数组，直接使用数组的 splice 方法触发相应式；
如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用   defineReactive 方法进行响应式处理（ defineReactive 方法就是  Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）
//
vue中data的属性可以和methods中的方法同名吗？为什么？
这个不行的，vue在初始化过程中会先进行初始化props(initProps)，然后会初始化methods(initMethods)，这里会判断是否与props中有重名的key，有的话会告警，然后再初始化data( initData)，这里又会判断是否有与props和methods重名的属性，有的话会告警。
//虚拟dom
虚拟DOM本质上是一个普通的js对象，它包含了创建一个DOM元素所需要的属性。
虚拟DOM的优缺点
优点：
保证性能下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
缺点：
首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。