北京建设网站图片qq排名优化网站
文章目录
- 37、谈谈你对 keep-alive 的了解
- 38、说一说Vue2的响应式原理?
- 39、你都做过哪些Vue项目上的性能优化
- 40、你知道style加scoped属性的用途和原理吗
- 41、mixins混入的理解
- 42、Vue路由懒加载怎么做的
- 43、SSR了解吗?
- 44、computed和watch的区别是什么?
- 45、 Vue项⽬的打包上线？
- 46、vue中动态组件如何使用?
37、谈谈你对 keep-alive 的了解
- 是什么？
● keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染, 一般结合路由和动态组件一起使用，用于缓存组件 - 具体使用？
2.1. 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated
2.2. 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高
38、说一说Vue2的响应式原理?
Vue2的响应式原理核心是通过数据劫持结合发布-订阅模式实现的，具体步骤如下：
- 数据劫持
Vue2使用Object.defineProperty递归劫持对象的属性，将其转化为getter/setter。当读取数据时触发getter，修改数据时触发setter。 - 依赖收集（Dep）
每个被劫持的属性都有一个Dep实例（依赖管理器）。在getter中，若当前存在正在执行的Watcher（如组件渲染时的渲染Watcher），则将该Watcher存入Dep的订阅列表，建立属性与Watcher的依赖关系。 - 派发更新（Watcher）
当数据变化触发setter时，Dep会通知所有关联的Watcher执行更新（如重新渲染组件）。Watcher通过异步队列优化多次更新，确保性能。 - 数组处理
Object.defineProperty无法监听数组索引变化，Vue2重写了数组的push、pop等7个方法。调用这些方法时手动触发更新，并通过__ob__属性关联数组的Dep。
局限
● 对象新增/删除属性需用Vue.set/Vue.delete。
● 数组直接通过索引修改或修改长度无法被监听，需用重写的方法或Vue.set
39、你都做过哪些Vue项目上的性能优化
- v-if和v-for不能连用
- 页面采用keep-alive缓存组件
- 合理使用v-if和v-show
- key保证唯一
- 使用路由懒加载、异步组件、组件封装实现复用
- 防抖、节流
- 第三方模块按需导入
- 图片懒加载
- 精灵图的使用
- 代码压缩
- CDN外链
a. 把项目中的三方库在打包的时候先排出
b.使用CDN的外部链接引入, 这样就能减少包的体积, 提高首屏加载的速度
40、你知道style加scoped属性的用途和原理吗
- 用途：防止全局同名CSS污染
- 原理：在标签加上v-data-hash属性，在当前组件的所有css样式选择器时加上对应[v-data-hash]，即CSS带属性选择器，以此完成类似作用域的选择方式.
41、mixins混入的理解
- 是什么
● mixins（混入），当发现多个vue组件的选项和钩子函数有部分或者较多的相同的代码, 此时就可以把相同代码的选项和钩子函数给抽到一个mixins对象, 在组件中导入该对象进行混入即可 - 使用场景
● 不同组件中经常会用到一些相同或相似的代码，这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来 - 如何创建Mixins
● 在 src 目录下创建一个 mixins 文件夹，在文件夹下新建一个 myMixins.js 文件。
● 因为 mixins 是一个 js 对象，所以应该以对象的形式来定义 myMixins，在对象中可以和 vue 组件一样来定义 data、components、methods、created、computed 等属性，并通过 export 导出该对象
● 在需要调用的组件中引入 myMixins.js 文件，直接混入即可
● 使用注意点:
○ 有冲突先用组件自身:
■ 如果混入的和data/computed/methods选项中有重名的, 使用组件中定义的属性
○ 没有冲突则叠加:
■ 如果混入钩子函数代码, 优先执行混入的再去执行组件钩子函数内部的代码 - 缺点
● 变量来源不明确
● 多 mixins 可能会造成命名冲突
● mixins 和组件出现多对多的关系，使项目复杂度变高 - 解决缺点
● Vue3的组合API 解决了mixins引起的所有问题(不清晰的数据来源，命名冲突等)，这也是Vue3中组合式API出现的原因之一
42、Vue路由懒加载怎么做的
- 是什么?
● 路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载 - 为什么?
● 像vue这种单页面应用，如果没有懒加载，运用webpack打包后的文件将会异常的大
● 造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验
● 而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 - 如何使用?
●import按需加载
export default new Router({routes: [{path: '/',name: 'HelloWorld',component: () => import('@/components/HelloWorld.vue')}
]
vue异步组件
export default new Router({routes: [{path: '/',name: 'HelloWorld',component: resolve => require(['@/components/HelloWorld'], resolve)}
]
43、SSR了解吗?
- 是什么
● SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
● SSR 是一种网页渲染技术，与传统的客户端渲染（Client-Side Rendering，CSR）相对应。在传统的客户端渲染模式下，浏览器首先加载 HTML 页面，这个 HTML 页面往往只有一个基本的结构，包含一些必要的脚本引用等，然后由浏览器中的 JavaScript 代码去获取数据，并动态地将数据填充到页面中，最终渲染出完整的、用户可见的页面内容。而服务器端渲染则是在服务器端就把完整的、包含了最终页面内容的 HTML 页面直接生成好，然后发送给浏览器，浏览器接收到后可以直接展示出来，后续再通过加载 JavaScript 等资源来进行交互等操作。 - 优点和缺点
优点:
● 更快的首屏加载速度
● 利于 SEO（搜索引擎优化）
缺点:
● 增加服务器负载
● 上手成本高 - 进行SSR开发, 可以用哪些技术栈?
● Next.js（基于 React）
●Nuxt.js (基于 Vue)
44、computed和watch的区别是什么?
计算属性computed：
- 支持缓存，只有依赖数据发生改变，才会重新进行计算
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- 如果computed需要对数据修改，需要写get和set两个方法，当数据变化时，调用set方法
- computed擅长处理的场景：一个数据受多个数据影响，例如购物车计算总价
侦听属性watch： - 不支持缓存，数据变，直接会触发相应的操作；
- watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
- immediate：组件加载立即触发回调函数执行
- deep:true的意思就是深入监听，任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑
5.watch擅长处理的场景：一个数据影响多个数据，例如搜索框
45、 Vue项⽬的打包上线？
- ⼿动部署
2.自动部署
本地Vscode编写代码，git push 将代码上传到gitlab托管平台, 通过.gitlab-ci.yml配置⽂件执⾏部署流程
1.gitlab是企业版，内部部署
2.Linux服务器
● 安装 gitlab-runner ⽤于拉取仓库代码
● 安装 Nodejs ⽤于打包项⽬
● 安装 pm2 ⽤于启动静态资源托管，守护进程
3.运维使⽤ Nginx 进⾏域名代理
4.⽤户通过浏览器访问服务
46、vue中动态组件如何使用?
Vue中的动态组件允许根据条件动态切换不同的组件渲染，核心是通过 标签与 is 属性实现。以下是关键点：
- 使用 ，通过 currentComponent 动态绑定要渲染的组件名或组件对象：
<!-- 动态切换组件 -->
<component :is="currentTab"></component>
2.组件类型
is 的值可以是：
○ 注册的组件名（字符串）
○ 组件选项对象（直接引入的组件）
○ 异步组件（结合 import() 动态加载）
3. 保持状态
用 包裹动态组件，避免切换时组件实例被销毁
<keep-alive><component :is="currentComponent"></component>
</keep-alive>
使用场景:
- Tab页切换
多个标签页对应不同组件，通过切换标签动态渲染内容。 - 条件渲染不同组件
根据业务逻辑（如用户权限、数据状态）动态选择组件，例如：
○ 未登录时显示登录组件，登录后显示内容组件。
○ 根据设备类型（PC/移动端）渲染不同UI组件。 - 异步加载组件
结合动态导入（import()）实现按需加载，优化首屏性能：
components: {AsyncComponent: () => import('./AsyncComponent.vue')
}
表单步骤向导
多步骤表单流程，每一步骤对应一个子组件，通过动态组件切换步骤。