vue面试题
MVVM
概念
model view viewModel
本质上是mvc（程序分层开发思想）
将viewModel的状态和行为抽象化，viewmodel将视图ui和业务逻辑分开，去除model的数据，同时处理view中需要展示的内容和业务逻辑
view视图层
html和css构成
展示页面和承载数据
model数据模型
axios请求的部分、数据和业务逻辑的处理
后端进行数据操作和业务逻辑处理
viewModel视图模型
前端人员生成和维护 视图和数据层，承上启下
处理view上的事件和输入，转化为对model的操作；model层获取数据，在view层进行数据处理、重构、渲染
MVVM特点
低耦合，内容可以独立分成单独模块，model和view互不影响
可复用性较强
分层开发，提高开发效率
测试容易
增加了应用程序的复杂性，双向数据绑定可能造成额外的开销
单页面应用
概念
SPA，加载单个html页面，在用户与应用程序交互时，动态更新页面
工作原理
浏览器发送请求，服务器返回index.htmlindex.html中的js脚本控制显示页面通过路由，在页面显示不同的模板和数据，调用切换仅返回json数据应用程序通过json动态更新页面，页面不会重新加载 优点 前后端分离，开发效率高用户体验好，无需重新加载页面，同一套后端程序可以支持web、手机等组件化，可复用性减轻服务器压力 缺点 首页加载较慢导航功能无法使用浏览器自带的页面前进、后退不利于SEO（因为页面内容是异步请求显示的）vue2和vue3的区别
双向绑定数据的原理不同
vue2：通过Object.defineProperty实现//数据更新，但是视图没更新//添加下面的代码用来更新视图this.$set(this.data, 'name', 'newName')vue3：通过Proxy实现
defineProperty和Proxy的异同
defineProperty改变对象的内部属性描述符proxy创建新代理对象，对原始对象的操作都重定向到这个代理对象上defineProperty只能修改对象本身，而proxy可以修改对象本身和原型链上的属性生命周期不同
vue2:beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory destroyed
vue3:setup onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted
keep-alive中多两个钩子函数
onActivated
onDeactivated
父子传值不同
vue2：props this.$emitsvue3：props defineEmitsAPI选型不同
vue2是选项式API，代码中分割不同属性 data methods computed …vue3是组合式APIvue3支持多根节点，vue2只支持单根节点
数据定义
vue2在data中定义，vue3使用ref或reactive
数据双向绑定原理
了解常用方法
reduce参数：(第一个值/上次计算的结果，当前项目，当前项目下标，调用的数组)
求和
const total=arr.reduce((a,b)=>a+b)
链式获取对象属性
const a=arr.reduce((newObj,k)=>{ //每次调用之后的newObj都是上一次返回的结果 return newObj[k]})发布订阅模式
名词
setter属性 -> set方法 有参，无需return
getter属性 -> get方法 无参
用来访问和设置对象的属性
object.defineProperty
可以定义新属性或修改原有属性
参数：defineProperty(目标对象,属性名,特性)
Object.defineProperty(obj,'name',{ //当前属性可以被循环遍历 enumerable:true, //当前属性允许被设置 configurable:true, //get方法 get(){ return 1 }, //set set(newVal){ console.log('set',newVal) }})在设置或获取属性的时候，自动调用其中的get和set方法
33:54
插槽
概念：决定将所携带的内容插入到某个指定的位置，模板在父组件中定义，传递到子组件显示
默认插槽
具名插槽
作用域插槽
数据在子组件上，但是表现由父组件决定
<template #name=“{data}”>
混入mixin
概念：可复用的代码片段，包含函数/功能/辅助的业务逻辑，写在单独的文件中
使用
定义在src/mixins/minxin.js中，导出function
在组件中导入mixin，解构其中值，可以读取数据和调用函数
注意：混入中的数据不共享
优点：使用方便，减少重复代码，可以实现复杂的业务逻辑
缺点：组件之间不能共享数据；混入的变量和方法很难找到来源；多个mixin容易引起冲突
nextTick
概念：下次DOM更新循环结束之后，延迟回调函数执行
异步更新队列
vue观察到更新数据后，不是直接更新dom，而是开启队列，缓存数据并去重，避免不必要的计算和更新
keep-alive
缓存组件，避免重复渲染
优势：组件切换过程中将状态保存在内存中，防止重复渲染DOM，减少加载时间和性能消耗，提高用户体验
使用router-view
<!-- vue3写法 --><router-view v-slot="{Component}"> <!-- 控制只缓存home --> <keep-alive include="homt"> <Component :is="Component" /> </keep-alive></router-view>控制缓存页面
include：只缓存xx
exclude：排除xx
max:最大缓存数
激活新钩子函数
onActivated 激活组件时onDeactivated 停用组件时vuex和pinia
vuex使用
基础import { useStore } from 'vuex'const store = useStore()调用mutation 要用commit
调用action 要用dispatch
数据持久化使用vuex-persistedstate
常用方法state：数据源
getters：返回被依赖的数据
mutations：同步更新数据源
actions：异步更新数据源
module:对多模块进行管理
pinia使用
基础使用import {defineStore} from 'pinia'export default defineStore('name',()=>{ const name="jack" return { name }},{ //持久化 persist:true})vuex和pinia的区别
方法区别
vuex：state getters mutations actions module
pinia：state getters actions
pinia调用更方便，可以直接对数据进行读写，不需要commit和dispatch
vuex中缺少模块属性支持，pinia中支持
pinia有更好的ts支持
vue源码
目录分析
src/compiler 模板解析和编译相关的文件src/core 核心文件，包括vue架构、内置组件、全局API封装等src/platforms 平台相关文件src/server 服务端渲染相关文件src/sfc .vue的解析文件src/shared 公共工具过程
npm run server之后，创建一个new Vue实例 --> 最核心是用到了instance/index
function vue 为什么不是class，因为有mixins或其他的公共方法，都在vue.prototype上，而new Vue实例，就相当于一个对象，所以用function
三种渲染方式：render template el，最终都得到render函数
render函数通过watcher绑定，数据发生变化时，执行update方法，调用vm._render()，产生虚拟DOM，patch对比新旧vnode，diff算法增删改真正的DOM元素
instance/init做了什么
为当前vue实例(vm)添加唯一uidvm._isVue设置为true（监听对象变化时过滤vm）初始化组件初始化各种内容，包括生命周期，事件，虚拟DOM等如果有el属性，就调用vm.$mount挂载vue实例vue渲染小结
new vue执行初始化挂载$mount，通过render函数生成渲染树watcher监听数据变化数据变化时，render函数生成vnode通过patch对新旧node进行比较，通过diff算法，增删改dom为什么vue3性能比vue2好
vue3向下兼容vue2，官方测试：vue3打包速度比vue2快41%，初次渲染提升50%，内存使用减少50%；一些基础API和方法进行了优化vue3在setup中的函数和变量优化了程序副作用vue2劫持数据使用defineProperty+发布订阅模式实现，数组和新增属性需要额外开销；vue3使用proxy进行数据代理，实现整个对象进行响应式观测，数据变化不需要额外开销vue3在依赖手机、程序运行做了性能优化，还增加了异步渲染和懒加载的特性代理和环境变量
代理：接口数据请求中，由于违反同源策略，导致cors跨域问题，需要配置代理，在vue.config.js中，添加devserver配置项及参数
环境变量：开发中使用开发环境，打包上线后使用生产环境
process.env.环境变量名称
computed和watch
computed计算属性必须有返回值，不支持异步，返回值会缓存，初始化会执行
const nums=computed(()=>{ return num.value*2})被监听的数据变化时，watch执行，初始化不会执行
watch(num,(newValue,oldValue)=>{ console.log(oldValue,newValue)})vue2和vue3响应式的区别
vue2：defineProperty+发布订阅模式实现在对象上定义新属性或修改现有对象的属性
三个参数：target,key,descriptor
Object.defineProperty(定义属性的对象,属性名称,属性描述)
缺点：递归遍历对象属性，消耗大；新增或删除属性不能立即响应，需要通过额外的方法（比如this.$set）；数组修改也需要额外方法
vue3：proxy实现拦截对象中任何属性变化，可以随时监听
需要两个参数 proxy(代理的目标对象，对象的handler处理函数)
实现了深层检测
formily自定义组件，子组件通知父组件更改数据
使用formily的field.set方法直接设置当前表单域的值，并通知父组件更新使用vue的v-model绑定子组件，子组件通过props的modelValue和emit方法通知父组件更新使用attrs的listeners，通知父组件更新listeners存储所有未被声明为prop的事件监听器
底层是基于js的事件机制和proxy实现，vue在编译阶段收集事件监听器，运行时通过attrs.listeners触发
diff算法
应用场景：虚拟dom渲染为真实dom的新旧VNode节点比较
比较方式：深度优先、同层比较
原理：数据发生变化时，set调用Dep.notify通知订阅者，订阅者调用patch给真实的DOM打补丁
如果isSameVnode相同，调用patchVnodevue性能优化
选用正确的架构，避免部署纯客户端的SPA（存在首屏加载缓慢的问题），可以通过SSR或SSG缓解压缩js打包文件体积，许多vue的API是可以被tree-shake的；按需引入依赖项代码分割：构建工具将js包拆分为多个小的，可以按需加载或并行加载的文件，vite默认支持props稳定性：vue组件中，一个子组件只会在至少一个props改变时才更新比如一个list列表，其中很多listitem组件，根据active-id判断当前组件是否是选中的激活组件，如果active-id改变，每个组件都会重新更新！可以改为 :active=“item.id === activeId”v-once 只渲染一次，不响应数据变化，v-memo跳过大型子树或v-for列表更新列表虚拟化，比如vue-virtual-scroll减少大型不可变数据的响应性开销，可以通过shallowRef 和 shallowReactive 来绕开深度响应避免不必要的组件抽象，组件实例比普通DOM节点昂贵的多