vue面试题
mvc mvvm和mvp的区别？
MVVM 就是 Model-View-ViewModel 的缩写，MVVM 将视图和业务逻辑分开。
View：视图层，Model 数据模型，而 ViewModel 是把两者建立通信的桥梁。
在 MVVM 框架下，View 和 Model 之间没有直接的联系，而是通过 ViewModel 进行交互。View 和 ViewModel 之间以及 Model 和 ViewModel 之间的交互都是双向的，因此 view 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反映到 View 上。可以说它们两者是实时更新的，互相影响。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，因此开发者只需要关注业务逻辑，不需要手动操作 DOM，也不需要关注数据状态的同步问题，这些都由 MVVM 统一管理，
整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。
【优点】
数据源和视图实现了双向绑定，很好的做到了数据的一致性 相比于mvp各层的耦合度更低，一个viewmodel层可以给多个view层共用。
【缺点】
因为使用了dataBinding，增加了大量的内存开销，增加了程序的编译时间，项目越大内存开销越大。 数据绑定使得 Bug 很难被调试。你看到界面异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题
MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范
- Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据
- View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的
- Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据,也可以将Model的数据用View显示出来
【优点】
耦合性低，方便维护，可以利于分工协作 重用性高
【缺点】
使得项目架构变得复杂，对开发人员要求高
MVP MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示，在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的
vue生命周期（11个进行扩展延伸）
beforeCreate() 创建前，这个时候data中的数据，还未定义，所以不能使用
created()创建后 最早开始使用 data和methods中数据的钩子函数
beforeMount()挂载前 指令已经解析完毕内存中已经生成dom树，但是尚未挂载到页面中去，此时页面还是旧的。
mounted()挂载后 dom已经渲染完毕，此时页面和内存中都是最新的数据，最早可以操作DOM元素钩子函数
beforeUpdate()更新前 当视图层的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新，数据没有与 页面同步
updated()更新后 数据更新完成以后触发的方法，DOM节点已经更新
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
destroyed()销毁完毕 组件已经全部销毁，Vue实例已经被销毁，Vue中的任何数据都不可用
一般在哪个生命周期请求异步数据
可以啊钩子函数中的 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
在created中最好
能更快获取到服务端数据，减少页面加载时间，用户体验更好；
SSR不支持 beforeMount 、mounted 钩子函数，放在 created 中有助于一致性。
mounted 在请求完数据之后需要对 dom 进行操作的时候可以用到
vue中 methods,computed, watch 的区别
computed 是vue中的计算属性，具有缓存性，当他的依赖于值，发生改变的时候才会重新调用
methods 是没有缓存的，只要调用，就会执行，一般结合事件来使用
watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作
created和mounted区别？
created：dom渲染前调用，即通常初始化某些属性值
mounted：在dom渲染后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
生命周期钩子是如何实现的
Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）
Vue底层实现原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调 Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对象，修改它则-视图（View）会自动更新。这种设计让状态管理变得非常简单而直观
Observer（数据监听器） : Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher
Compile（指令解析器） : Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新-视图
Watcher（订阅者） : Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：
在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个update()方法
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调
diff算法
diff 算法是一种通过同层的树节点进行比较的高效算法,比较方式：diff整体策略为：深度优先，同层比较
diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方，总的来说就是减少DOM，重绘和回流。
为什么要用虚拟DOM来描述真实的DOM呢？
创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。
vue双向数据绑定原理？
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。
vue.js的两个核心是什么
灵活的组件应用，高效的数据绑定
渐进式框架的理解,vue数据驱动的理解
渐进式代表的含义是：主张最少——它是一个轻量级框架，只做了自己该做的事，没有做不该做的事
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
这里的vue数据驱动的是视图，也就是DOM元素，指的是让DOM的内容随着数据的改变而改变框架的理解
Vue的SSR是什么？有什么好处？
SSR全称Server Side Render
有利于SEO：由于是在服务端，将数据填充进HTML之后再推送到浏览器，所以有利于SEO的爬取
首屏渲染快
SSR的缺点：
开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子；
当需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境；
更多的服务端负载。
vue3.0 与 vue2.0 的区别
1.性能提升
更小巧，更快速；支持摇树优化。支持 Fragments (支持多个根节点)和跨组件渲染；支持自定义渲染器。
2.API 变动
Vue2使用 选项类型API（Options API） 对比Vue3 合成型API（Composition API）
optionsApi 使用传统api中，新增一个需求，要在data，methods，computed中修改
compositionApi 我们可以更加优雅的组织我们的代码，函数，让我们的代码更加有序的组合在一起
3.重写虚拟 DOM (Virtual DOM Rewrite)
随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点。
vue3 没有了过滤器
双向数据绑定 从 Object.defineProperty() 变成了 proxy，通过下标修改数组变化了视图数据没发生变化 this.$set() vue3不需要
双向数据绑定原理发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：
可直接监听数组类型的数据变
监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
可直接实现对象属性的新增/删除
vuex考点
vuex是一个状态管理工具，所谓状态的是就是数据，采用集中式存储管所有组件的状态，是为了结局中大型项目一个数据共享的问题。vuex 他可以将数据保存到本地，数据是响应式的，能够保持数据页面的共享，提高开发效率。
好处：
能够在 vuex 中集中管理共享的数据，易于开发和后期维护 可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步，能够高效地实现组件之间的数据共享，提高开发 效率
vuex核心：
state：vuex的基本数据，数据源存放地，用于定义共享的数据。
getter：从基本数据派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，唯一 一个可以操作state 中数据的方法，必须是同步的，第一个参数是state，第二个参数是cmmi传过来的数据
action：action是用来做异步操作的，一般用来发请求，在 action 中写入函数，然后在页面中用dispatch调用，然后在 action 中通过commit 去调用 mutation 通过 mutation 去操作state。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理
详述Vuex运行机制
Vuex提供数据（state），来驱动视图（这里指的是Vue组件），视图通过Dispatch派发Action，在Action中可以进一步做一些异步的操作（例如通过ajax请求后端的接口数据），然后通过Commit提交给Mutations，由Mutations去最终更改state。那么为什么要经过Mutations呢？这是因为我们要在Vue调试工具(Devtools)中记录数据的变化，这样可以通过插件去进行进一步的调试。所以说Mutations中只能是纯同步的操作，如果是有异步操作，那么就需要在Actions中进行处理。如果说没有异步操作，那么可以直接由组件进行Commit操作Mutations。
Vuex 页面刷新数据丢失怎么解决
需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件
推荐使用 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中
Vuex 为什么要分模块并且加命名空间
模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。方便管理
vue路由的跳转方式有几种
1、 2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数
router.push、router.replace、router.go、router.back的区别？
router.push：跳转，并向history栈中加一个记录，可以后退到上一个页面
router.replace：跳转，不会向history栈中加一个记录，不可以后退到上一个页面
router.go：传正数向前跳转，传负数向后跳转
router.back 返回到上一级页面
vue 路由传参数如何实现、query 和 params
主要通过 query 和 params 来实现
(1) query可以使用name和path而params只能使用name
(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存
(3) Params在地址栏中不会显示，query会显示
(4) Params可以和动态路由一起使用，query不可以
（5）to=”/goods?id=1001”this.然后在接收的页面通过 $route.query.id 来接收
路由对象route和router的区别
route 是“路由信息对象”，包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。
router 是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。
能说下 vue-router 中常用的路由模式实现原理吗
hash 模式 location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 可以为 hash 的改变添加监听事件 window.addEventListener("hashchange", funcRef, false); 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了 特点：兼容性好但是不美观 history 模式 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。 这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。
v-for 与 v-if 的优先级
v-for 比 v-if 优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
vue中key 的作用
“key 值:用于管理可复用的元素。因为 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快,但是这样也不总是符合实际需求。 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 是必须的。”
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点，更高效的对比虚拟DOM中每个节点是否是相同节点，相同就复用，不相同就删除旧的创建新的
vue 初始化页面闪动问题。
能够解决插值表达式闪烁问题，需要在style中设置样式[v-clock]{display:none}
v-if和v-show的区别及使用场景？
v-if 动态的创建或者销毁元素，为true的时候为显示，为false的时候不显示，要使用v-else必须和v-if紧挨着
v-show 是控制元素的显示或者隐藏，在我们的标签上会看到有display：block，none
v-if 有更高的切换消耗，而 v-show 有更高的初始化渲染消耗，一般推荐频繁切换的时候使用 v-show 更好，当我们的判断分支比较多的时候，和首次渲染的时候 使用v-if
组件模块部分（插槽，单页面，通信）
vue 组件父子，子父，兄弟通信
父传递子如何传递
（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量 （2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: ["属性名"] props:{属性名:数据类型}
子传递父如何传递
（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 （2）在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式进行传递的
兄弟组件如何通信
（1）找到min.js文件，给他vue挂载一个 公共的 bus = new Vue() （2）传送数据的一方 用this.emit('事件名'，'传送的数据') （3）在 接收数据的一方用通过 Bus.$on("事件名",(data)=>{data是接受的数据})
VUE组件中的data为什么是一个函数
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，这就造成了数据污染。如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了
组件特性及好处、组件的基本组成
(1) 特性:重用性、可指定性、互操作性、高内聚性、 低耦合度
(2) 好处：组件可以扩展HTML元素、封装可重用代码
template 结构（html代码）
script行为
style样式
vue的项目中问题
单页面应用和多页面应用区别以及优缺点，
单页面：只有一个html页面，跳转方式是组件之间的切换
优点：跳转流畅、组件化开发、组件可复用、开发便捷
缺点：首屏加载过慢
多页面：有多个页面，跳转方式是页面之间的跳转
优点：首屏加载块
缺点：跳转速度慢
vue中如何解决跨域问题？
在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域
Vue 解决了什么问题
① 虚拟 dom：dom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的还是 dom，不过是换了一种方式。提供了很多指令当然需要 对 dom 进行底层操作的时候就用到自定义指令
② 视图、数据、结构分离：使数据的更改更为简单，只需要操作数据就能完成相关操作。
③ 组件化：把一个单页应用中的各种模块拆分到一个一个单独的组件中，便于开发，以及后期的维护
Vue.js 的特点
简洁：页面由 HTML 模板+Json 数据+Vue 实例组成 数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面 轻量：代码量小，不依赖其他库 快速：精确有效批量 DOM 更新 模板友好：可通过 npm，bower 等多种方式安装，很容易融入 Vue 的核心库只关注视图层，并且非常容易学习
vue 与 react的区别
相同点 ：
都是使用了虚拟dom
组件化开发
父子之间通信单项数据流
都支持服务端渲染
不同点：
reacct 的jsx vue的是 template
数据变化，react 手动 setState vue自动响应式处理 proxy object.DefineProperty
react 单向数据流 ，vue双向数据流
react 的 redux mobx vue 的vuex 。pinia
你都做过哪些Vue的性能优化？
尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher v-if和v-for不能连用 v-if 和 v-show 区分使用场景 v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if 如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件 在更多的情况下，使用v-if替代v-show 使用路由懒加载、异步组件
防抖、节流 第三方模块按需导入
长列表滚动到可视区域动态加载,不需要响应式的数据不要放到 data 中（可以Object.freeze() 冻结数据）
图片懒加载
SEO优化 预渲染
服务端渲染SSR 打包优化,
压缩代码 Tree Shaking/Scope Hoisting
使用cdn加载第三方模块 多线程打包happypack splitChunks抽离公共文件 sourceMap优化 骨架屏
PWA 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。防止内部泄漏，组件销毁后把全局变量和事件销毁
