互联网站备案管理工作方案 工信部,腾讯广告一级代理名单,徐州市建设局网站,做百度网站费用vue面试题
MVVM 概念 model view viewModel 本质上是mvc#xff08;程序分层开发思想#xff09; 将viewModel的状态和行为抽象化#xff0c;viewmodel将视图ui和业务逻辑分开#xff0c;去除model的数据#xff0c;同时处理view中需要展示的内容和业务逻辑 view视图层 …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
父子传值不同
vue2props this.$emitsvue3props defineEmits
API选型不同
vue2是选项式API代码中分割不同属性 data methods computed …vue3是组合式API
vue3支持多根节点vue2只支持单根节点
数据定义
vue2在data中定义vue3使用ref或reactive
数据双向绑定原理
了解常用方法
reduce 参数(第一个值/上次计算的结果当前项目当前项目下标调用的数组) 求和 const totalarr.reduce((a,b)ab) 链式获取对象属性
const aarr.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},//setset(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 includehomtComponent :isComponent //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 piniaexport default defineStore(name,(){const namejackreturn {name}
},{//持久化persist:true
})
vuex和pinia的区别 方法区别 vuexstate getters mutations actions module piniastate 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()产生虚拟DOMpatch对比新旧vnodediff算法增删改真正的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 numscomputed((){return num.value*2
})watch 被监听的数据变化时watch执行初始化不会执行
watch(num,(newValue,oldValue){console.log(oldValue,newValue)
})区别
computed必须有returnwatch无需computed不支持异步,watch支持computed初始化执行watch不执行computed会缓存数据,watch不会
vue2和vue3响应式的区别
vue2defineProperty发布订阅模式实现 在对象上定义新属性或修改现有对象的属性 三个参数target,key,descriptor Object.defineProperty(定义属性的对象,属性名称,属性描述)
缺点递归遍历对象属性消耗大新增或删除属性不能立即响应需要通过额外的方法比如this.$set数组修改也需要额外方法
vue3proxy实现 拦截对象中任何属性变化可以随时监听 需要两个参数 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相同调用patchVnode
vue性能优化
选用正确的架构避免部署纯客户端的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节点昂贵的多
