警警的博客

Vue核心概念，顶层设计，好好吸收！

checkPwd为触发的自定义校验函数，这个函数的定义需要写在 data数据return的上面,其中参数二就是确认密码填写的值，需要和regForm.password的的值作对比参数三尤其注意，这个回调函数无论 密码 和确认密码 一不一致都必须调用一次data() {// 参数1: rule 对象, 是校验规则, 一般不用// 参数2: value 校验项的数据// 参数3: callback 回调函数, 决定是否校验通过if (value!

vue项目部署、主题与语言设置、diff、vue3&2

Vue进阶面试题目（二）

Vue进阶面试题（一）

前端面试场景题目：Vue|HTML|CSS|JAVASCRIPT|WEBPACK

如何在浏览器中执行100万个任务，并保证页面不卡顿?如何在页面内一次性渲染10万条数据，并保证页面不卡顿?前端如何处理后端接口一次性返回的超大树形结构数据?如何禁止别人调试前端页面代码?如何对前端应用中静态资源加载失败的场景进行降级处理?前端页面白屏的原因可能是什么，如何排查?如何在前端实现网页截图功能?可以将某部分或整个页面的内容保存为图片如何使用节流或防抖技术优化频繁触发请求的搜索输入框?如何调试和解决跨浏览器兼容性问题?如何设计一个前端页面，实现PC端访问展示Web应用，移动端访问展示H5应用?如何实

在 JavaScript 中，事件总线（Event Bus）是一种设计模式，允许不同组件或对象通过事件进行通信，而无需直接引用对方。在前端项目中实现模块化，可以采用多种技术和工具，如 ES6 模块、CommonJS、AMD 等。在前端页面实现无限滚动加载内容时，为了保持页面性能和用户体验，可以自动回收上面的内容。：后端接收到前端请求后，根据AppID、回调URL等信息生成微信登录的二维码URL，并返回给前端。：首先，需要在微信开放平台注册一个账号，并创建一个网站应用，获取AppID和AppSecret。

可扩展的渲染器BPMN.js 支持开发者自定义渲染器，可以通过覆盖默认的，为流程图中的节点和连线自定义样式。开发者可以定义新的 SVG 元素、附加图标等，适应企业的特定样式要求。

自定义指令允许开发者直接对DOM元素进行低层次操作，而无需编写大量的模板或者JavaScript代码。它们可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。全局注册使用方法可以在全局范围内注册一个自定义指令。// 指令的定义// 只调用一次，指令第一次绑定到元素时调用// 在这里可以进行一次性的初始化设置},// 其他钩子函数...});局部注册在组件中，可以使用directives选项来局部注册自定义指令。// 指令的定义// ...},// 其他钩子函数...},

闭包是由函数以及创建该函数时的作用域组合而成的。这意味着，即使函数在其词法作用域之外被调用，它仍然可以访问那个作用域中的变量。

vue-form-generator` 支持多种字段类型，包括：- 文本输入（`input`）- 数字输入（`number`）- 下拉选择（`select`）- 复选框和单选按钮（`checkbox`, `radio`）- 日期选择（`date`）此外，`vue-form-generator` 还支持自定义字段类型。通过注册自定义组件，可以扩展生成器，满足更复杂的表单需求。例如，文件上传、富文本编辑器等复杂字段都可以通过自定义组件实现。

Vue Router进阶：导航守卫动态路由、过渡效果transition等

动态路由的定义动态路由是指把匹配某种模式下的路由映射到同一个组件中，本质是通过 URL 进行传参。例如，有一个商品 Goods 的组件，需要让不同的商品 ID 都映射到这个组件中，此时就需要用到动态路由。在 Vue 中，可以通过在路由路径中使用冒号（:）来绑定动态参数。javascript复制代码获取动态参数使用params方式传参时，可以通过来获取动态参数。例如，在上述路由配置中，要获取商品 ID，可以使用。使用query方式传参时（例如），可以通过来获取动态参数。例如，要获取商品 ID，可以使用。

sync在 Vue.js 中，.sync修饰符是一种语法糖，用于简化父子组件之间的双向数据绑定。它主要用在子组件向父组件发送更新某个 prop 的事件时。在 Vue 2.3.0+ 版本中，.sync修饰符被重新引入（之前在 Vue 1.x 中存在，但在 Vue 2.0 中被移除了），用于替代之前需要手动监听事件并更新父组件数据的模式。.sync。

服务器端渲染（SSR, Server-Side Rendering）是一种在服务器上生成完整的 HTML 页面，然后将其发送到客户端的技术。Vue Server Renderer Nutx

Vite是一款由Vue.js的作者尤雨溪开发的前端构建工具，专为现代前端项目而设计。它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。以下是对Vite的详细解析：Vite的配置文件是Vite项目中的核心配置文件，通过该文件可以对项目的开发服务器、插件系统、打包配置等进行自定义。常见的配置项包括：Vite非常适合用于现代前端项目的开发，特别是在需要快速启动、热更新和良好开发体验的场景下。例如，在开发Vue、React等单页面应用（SPA）时，Vite能够显著提升开发效率，降低开发成本。Vite作为一款现

React：适合大型项目，灵活且扩展性强，适合拥有一定前端经验的开发者。Vue.js：学习成本较低，适合快速开发，适合中小型项目。Angular：企业级框架，适合大型应用，功能齐全但学习曲线陡峭。Svelte：性能优越，适合轻量级应用或性能要求较高的项目

综上所述，Vue 首页性能提升需要从代码分割、静态资源优化、DOM操作优化、计算属性与观察者优化、异步组件与组件缓存、服务器端渲染与预渲染、第三方库优化以及性能监控与分析等多个方面入手。针对Vue前端项目的优化，我们可以从首屏秒开、缓存策略、懒加载、白屏时间减少以及卡顿问题等方面进行详细阐述。Vue 首页性能提升是Vue应用开发中非常重要的一环，它直接影响用户体验和应用的加载速度。综上所述，Vue前端项目的优化需要从多个方面入手，通过合理的策略和技术手段，不断提升应用的性能和用户体验。

长时间保存token安全问题设置、10万数据列表如何不卡顿展示（虚拟列表、分页）

Vue 自定义指令是 Vue.js 框架中一个非常强大的功能，它允许你注册一些全局或局部的自定义 DOM 操作指令，以便在模板中复用。自定义指令通过 Vue.directive() 方法进行全局注册，或者在组件的 directives 选项中局部注册。bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用（保证父节点存在，但不一定已被插入文档中）。update。

例如，Vue.js 会在内部定义一些工具方法，这些工具方法既可以在浏览器端的 Vue.js 中使用，也可以在服务端的 Vue.js 中使用。需要注意的是，在Vue 2.x中，如果你使用了构建时预编译（例如通过vue-loader），那么模板已经被编译成了渲染函数，Vue在运行时就不需要再次编译了。在Vue 3.x中，编译过程有所变化，因为Vue 3引入了编译时优化和更高效的编译策略，但基本概念仍然相同：模板被编译成渲染函数，然后Vue使用这些渲染函数来生成和更新DOM。时，实际上是在调用这个构造函数。

大文件上传时，如果直接上传整个文件，可能会因为文件过大导致上传失败、服务器超时或内存溢出等问题。因此，通常采用文件切片（Chunking）的方式来解决这些问题。文件切片上传的原理是将大文件分割成多个小文件（即切片），然后逐个上传到服务器。服务器接收到所有切片后，再将这些切片合并成原始的大文件。

更灵活的渲染方式：Vue3引入了一个新的自定义渲染API，允许开发者更加灵活地控制组件的渲染方式。这有助于开发者根据项目需求，优化渲染过程，提高性能。Vue除了提供内置的指令（如v-modelv-showv-if等）外，还允许开发者注册自定义指令。自定义指令提供了一种机制，通过它可以封装一些DOM操作，以扩展Vue的功能。自定义指令以v-为前缀（在注册时不需要前缀，但在使用时需要），后跟自定义的指令名。自定义指令可以通过两种方式注册：全局注册和局部注册。全局注册使用方法注册一个全局自定义指令。

虚拟DOM是一种用于在前端开发中模拟真实DOM的技术。它是一种抽象的数据结构（简单来说就是一个Javascript对象），用于描述HTML或XML文档的结构和内容。通过将页面的状态和结构保存在内存中，而不是直接操作真实的DOM，虚拟DOM能够减少不必要的DOM操作，从而提高页面性能。

双向数据绑定、混入、keep-alive、vuex与pinia、js多线程、set与map

Vue双向数据绑定

大厂前端面试中常见的手写代码题目涵盖了多个方面，包括但不限于算法、数据结构、JavaScript 基础知识、DOM 操作、异步编程等。

uni-app 的基础语法主要基于 Vue.js，同时提供了一些特有的语法和功能来支持跨平台开发。开发者需要熟练掌握 Vue.js 的基础语法，并了解 uni-app 的特有语法和功能，以便更好地进行跨平台应用开发。对于无法通过rpx单位或条件编译解决的样式差异，可以通过编写自定义的样式适配逻辑来处理。例如，可以使用CSS媒体查询（Media Queries）来根据屏幕尺寸、分辨率等条件设置不同的样式规则。此外，还可以根据uni-app提供的全局变量（如）来判断当前运行的平台，并据此设置不同的样式类。

uni-app是一个基于Vue.js的跨平台开发框架，它允许开发者使用Vue.js的语法和API来开发微信小程序、H5、App等多个平台的应用。uni-app提供了丰富的API，涵盖了页面生命周期、导航、数据存储、网络请求、图片操作、地理位置等多个方面。

uni-app的视图组件丰富多样，涵盖了从基础布局到复杂交互的各个方面。通过合理使用这些组件，开发者可以高效地构建出美观、易用、功能丰富的移动应用界面。同时，uni-app的跨平台特性也使得这些组件在不同平台上都能保持良好的兼容性和用户体验。

文件是 uni-app 项目中用于管理应用配置的重要文件，它包含了应用的名称、图标、权限、版本信息、页面路由配置、窗口样式配置、平台特有配置等多个方面的内容。文件是 uni-app 项目中用于全局配置的重要文件，它决定了页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。文件是 uni-app 项目中非常重要的配置文件，通过合理配置该文件，可以方便地管理应用的基本信息、窗口表现、平台特有配置等多个方面的内容。文件中可以配置相应的权限申请信息。的页面管理部分，但提供了更多跨平台的配置选项。

uni-app 的基础语法主要基于 Vue.js，同时提供了一些特有的语法和功能来支持跨平台开发。开发者需要熟练掌握 Vue.js 的基础语法，并了解 uni-app 的特有语法和功能，以便更好地进行跨平台应用开发。对于无法通过rpx单位或条件编译解决的样式差异，可以通过编写自定义的样式适配逻辑来处理。例如，可以使用CSS媒体查询（Media Queries）来根据屏幕尺寸、分辨率等条件设置不同的样式规则。此外，还可以根据uni-app提供的全局变量（如）来判断当前运行的平台，并据此设置不同的样式类。

若依框架登录鉴权：1.获取token（过期在响应拦截器中实现）,2.基于RBAC模型获取用户、角色和权限信息（在路由前置守卫），3.根据用户权限动态生成（从字符串->组件，根据permission添加动态路由信息）和添加路由addRoutes（在路由前置守卫）

用户-角色-菜单（User-Role-Menu）模型是一种常用于权限管理的设计模式，用于实现系统中的用户权限控制。通过token鉴权，实现不同用户不同菜单

通讯类型通讯方式发送方接收方示例说明父子组件props父组件子组件父组件通过 props 传递数据给子组件父子组件$emit子组件父组件子组件通过 $emit 触发事件，父组件监听并处理祖孙组件祖先组件后代组件祖先组件通过 provide 提供数据，后代组件通过 inject 接收兄弟组件通过父组件兄弟组件A兄弟组件B兄弟组件A通过事件通知父组件，父组件再传递给兄弟组件B兄弟组件全局状态管理（Vuex/Pinia）兄弟组件A兄弟组件B。

Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。

Vue面试常见知识总结3——computed|watch|method、路由、nextTick、组件间通讯

Vue项目的部署：Tomcat、Ngnix

spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区别