2022年vue3。0面试题

　　一、什么是MVVM？
　　MVVM是ModelViewViewModel的缩写，
　　Model代表数据模型，定义数据操作的业务逻辑。
　　View代表视图层，负责将数据模型渲染到页面上。
　　ViewModel控制，通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。二、Vue的双向数据绑定原理是什么？或者说Vue的响应式原理
　　vue。js是采用数据劫持结合发布者订阅者模式的方式，通过Object。defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。三、Vue3。0的新特性
　　1、增加了compositionapi
　　2、虚拟DOM重写
　　3、优化slots的生成
　　4、基于Proxy的响应式系统
　　5、TypeScript模块化四、Vue。js3。0放弃defineProperty，使用Proxy的原因
　　1、监控到数组下标的变化时，开销很大。所以Vue。js放弃了下标变化的检测；
　　2、Object。defineProperty只能劫持对象的属性，而Proxy是直接代理对象。
　　3、Object。defineProperty需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而Proxy直接代理对象，不需要遍历操作。
　　4、Object。defineProperty对新增属性需要手动进行Observe。vue2时需要使用vm。set才能保证新增的属性也是响应式
　　5、Proxy支持13种拦截操作，这是defineProperty所不具有的
　　6、Proxy作为新标准，长远来看，JS引擎会继续优化Proxy，但getter和setter基本不会再有针对性优化五、生命周期是什么
　　Vue实例从创建到销毁的过程，就是生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom渲染、更新渲染、卸载等一系列过程，我们称这是Vue的生命周期。六、vue生命周期总共有几个阶段？
　　总共可以分8个阶段：创建前后、载入前后、更新前后、销毁前后
　　生命周期的钩子函数：有8个常规钩子和2个额外的钩子10个
　　第一次页面加载会触发哪几个钩子？
　　第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子七，简述每个周期具体适合哪些场景？
　　1、beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
　　data，computed，watch，methods上的方法和数据均不能访问。
　　读法（DFokrietd）
　　2、created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。一般初始化事件和异步请求放在这里调用
　　3、beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
　　beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
　　4、mounted：挂载完成创建vue实例，和双向绑定，挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
　　5、beforeUpdate：数据更新前，数据驱动DOM。在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
　　可在更新前访问现有的DOM，如手动移出添加的事件监听器。
　　6、updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新，可执行依赖的DOM操作。
　　注意：不要在此函数中操作数据（修改属性），会陷入死循环。
　　7、beforeDestroy：销毁前，可做一些删除提示，如：您确定删除xx吗？
　　8、destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。这时组件已经没有了，无法操作里面的任何东西了。
　　9、额外的钩子：activated：在使用vuerouter时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。
　　如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
　　10、额外的钩子：deactivated：组件被移除时使用。八、父子组件的生命周期
　　1、执行顺序：
　　1）父组件开始执行到beforeMount然后开始子组件执行，最后是父组件mounted。
　　2）如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。
　　2、完成流程顺序
　　1）加载渲染过程：父beforeCreate父created父beforeMount子beforeCreate子created子beforeMount子mounted父mounted
　　2）子组件更新过程：父beforeUpdate子beforeUpdate子updated父updated
　　3）父组件更新过程：父beforeUpdate父updated
　　4）销毁过程：父beforeDestroy子beforeDestroy子destroyed父destroyed
　　3、概念：
　　1）当子组件挂载完成后，父组件才会挂载。
　　2）当子组件完成挂在后，父组件会主动执行一次beforeUpdatedupdated钩子函数（仅首次）
　　3）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。
　　4）销毁父组件时，先将子组件销毁后才会销毁父组件。
　　5）兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行
　　6）当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的九。Vue2。0和Vue3。0生命周期发生了什么变化
　　1、最大的改变就是setUp，setUp这个生命周期发生在beforeCreate和created之前。两种形式的生命周期函数是可以共存，它们都会被执行。
　　2、其他都是大同小异，只不过换了写法前面加上了on都写在setUp里面，在使用时需要按需引入函数十、你怎么理解vue中的diff算法？
　　diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比，将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为0（N）。
　　比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试；
　　如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；
　　借助key通常可以非常准确的找到相同节点，因此整个patch过程非常高效。十一、什么是vdom
　　vdom是一种使用js对象来描述真实DOM的技术，通过这种技术，们能精确知道哪些真实DOM改变了，从而尽量减少DOM操作的性能开销。十二、Vue中Computed和Watch、Method的区别
　　computed：计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。
　　一个数据受多个数据影响
　　1、支持缓存，只有依赖数据发生改变，才会重新进行计算
　　2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
　　watch：当需要在数据变化时执行异步或开销较大的操作时，一个数据影响多个数据
　　1、不支持缓存，数据变直接会触发相应的操作；
　　2、watch支持异步；
　　methods：调用总会执行该函数，每次都会重新计算十三、请你说说nextTick
　　将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新十四、的作用是什么？
　　答：keepalive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。比如说把某一个列表滑动到第100条位置，切换到一个组件后这次切换回该组件还会保持在100条的位置。十五、vueloader是什么？使用它的用途有哪些？
　　答：vue文件的一个加载器，将templatejsstyle转换成js模块。
　　用途：js可以写es6、style样式可以scss或less、template可以加jade等十六、for循环为什么使用key？不写会怎么样
　　答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM。不写key会导致所有列表DOM重新渲染，大大降低性能，同时编辑器也会报错。十七、watch怎么深度监听对象变化？
　　答：当设置deep：true时，就可以深度监听到对象到内部值的变化。十八、请你说一下vmodal
　　答：vmodel用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：vbind绑定一个value属性；von指令给当前元素绑定input事件。十九、delete和Vue。delete删除数组的区别
　　答：delete只是被删除的元素成了空项，其他的元素键值还是不变。Vue。delete直接删除了数组，改变了数组的键值。二十、组件传值方式有哪些
　　1、父传子：子组件通过props〔xx〕来接收父组件传递的属性xx的值写法：key数据
　　2、子传父：子组件通过this。emit（fn，value）来传递，父组件通过接收fn事件方法来接收回调写法：提交的事件接收的函数
　　3、Vuex二十一、vuex是什么？怎么使用？哪种功能场景使用它？
　　Vuex是一个专为Vue。js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
　　场景：多个组件共享数据或者是跨组件传递数据时
　　vuex的流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值二十二、vuex有哪几种属性
　　有五种，分别是State，Getter，Mutation，Action，Module（就是mapAction）
　　1、state：vuex的基本数据，用来存储变量
　　2、geeter：从基本数据（state）派生的数据，相当于state的计算属性
　　3、mutation：提交更新数据的方法，必须是同步的（如果需要异步使用action）。每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。
　　4、action：和mutation的功能大致相同，不同之处在于》1。Action提交的是mutation，而不是直接变更状态。2。Action可以包含任意异步操作。
　　5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。二十三、Vue。js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
　　1、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex的state里。
　　2、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用asyncawait处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便二十四、vuerouter相关题目
　　1、vuerouter是什么？它有哪些组件？
　　答：vue用来写路由一个插件。有routerlink、routerview，重定向：redirect
　　2、vuerouter怎么定义动态路由？怎么获取传过来的值？怎么获取当前的路由信息？
　　答：1）定义动态路由：在router目录下的index。js文件中，对path属性加上：id。
　　2）获取传过来的值：使用router对象的params。id。
　　3）获取当前路由信息：使用this。router获取当前的路由信息。Vue3。0中通过getCurrentInstance方法获取当前组件的实例，然后通过ctx属性获得当前上下文，ctx。router是VueRouter实例，currentRoute可以获取到当前的路由信息
　　3、vuerouter钩子函数有哪些？都有哪些参数？有哪些作用？
　　答：1）全局前置守卫：beforeEach（（to，from，next）｛｝），它接收3个参数，分别是to：即将进入的路由对象。form：当前导航正要离开的路由。next（）：进行管道中的下一个钩子
　　2）全局后置钩子：afterEach（（to，form）｛｝）
　　3）全局解析守卫：beforeResolve（（to，from，next）｛｝）
　　4）组件内导航钩子：beforeRouteEnter（to，from，next）｛在渲染该组件的对应路由被confirm前调用不能获取组件实例this因为当守卫执行前，组件实例还没被创建｝，
　　5）组件内导航钩子：beforeRouteUpdate（to，from，next）｛在当前路由改变，但是该组件被复用时调用。可以访问组件实例this｝，
　　6）组件内导航钩子：beforeRouteLeave（to，from，next）｛导航离开该组件的对应路由时调用可以访问组件实例this｝。
　　作用：vuerouter提供的导航钩子主要用来拦截导航，让它完成跳转或取消。
　　4、vue中router与route区别
　　router：对象是全局路由的实例，是router构造方法的实例。比如this。router。push。英标：〔rutr，ratr〕低音
　　route：对象表示当前的路由信息，包含了当前URL解析得到的信息。包含当前的路径，参数，query对象等。英标：〔rut〕重音
　　5、vuerouter的两种模式的区别
　　答：1）hash模式：地址栏后面带有号，当后面的hash发生变化，不会导致浏览器向服务器发出请求，浏览器不发出请求就不会刷新页面，并且会触发hasChange这个事件，通过监听hash值的变化来实现更新页面部分内容的操作，做到单页面无刷新
　　2）history模式：主要使用HTML5的pushState（）和replaceState（）这两个api来实现的，pushState（）可以改变url地址且不会发送请求，replaceState（）可以读取历史记录栈，还可以对浏览器记录进行修改
　　他们最大的区别：
　　hash模式的hashchange，只能改变后面的url片段。
　　history模式则会将URL修改的就和正常请求后端的URL一样，如后端没有配置对应userid的路由处理，则会返回404错误
　　6、vuerouter实现路由懒加载（动态加载路由）的方式有哪些？
　　1、vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。
　　2、路由懒加载（使用import）。
　　3、webpack提供的require。ensure（）
　　7、vuerouter传参
　　Params：只能使用name，不能使用path，参数不会显示在路径上，浏览器强制刷新参数会被清空。
　　传递参数this。router。push（｛name：Home，params：｛number：1，code：999｝｝）接收参数constpthis。route。params
　　Query：参数会显示在路径上，刷新不会被清空name可以使用path路径
　　传递参数this。router。push（｛name：Home，query：｛number：1，code：999｝｝）接收参数constqthis。route。query
　　Vue。js是什么
　　是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，还便于与第三方库或有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动