vue面试题|[2025-2-1]

1.封装一个可复用的组件，需要满足什么条件？

1.低耦合，组件之间的依赖越小越好

2.最好从父级传入信息，不要在公共组件中请求数据

3.传入的数据要进行校验

4.处理事件的方法写在父组件中

2.vue的过滤器怎么使用？

vue的特性，用来对文本进行格式化处理

使用它的两个地方，一个是插值表达式，一个是v-bind

分类：

1.全局过滤器
javascript 复制代码
Vue.filter('add',function(v){
    return v < 10 ? '0'+v : v
})

<div>{
   
   {33 | add}}</div>
2.本地过滤器

和methods同级
javascript 复制代码
filter:{
    add:function(v){
        return v<10 ? '0'+v : v
    }
}

3.vue中如何做强制刷新？

1.localtion.reload()

2.this.$router.go(0)

3.provide和inject

4.vue3和vue2有哪些区别？

1.双向数据绑定的原理不同

2.是否支持碎片

3.API不同

4.定义数据变量方法不同

5.生命周期的不同

6.传值不同

7.指令和插槽不同

8.main.js不同

5.vue的性能优化怎么做？

1.编码优化

不要把所有数据都放在data中

v-for时给每个元素绑定事件用事件代理

keep-alive缓存组件

尽可能拆分组件，提高复用性、维护性

key值要保持唯一

合理使用路由懒加载，异步组件

数据持久化存储的使用尽量防抖、节流优化

2.加载优化

按需加载

内容懒加载

图片懒加载

3.用户体验

骨架屏

4.SEO优化

预渲染

服务端渲染ssr

5.打包优化

CDN形式加载第三方模块

多线程打包

抽离公共文件

6.缓存和压缩

客户端缓存、服务端缓存

服务端Gzip压缩

6.首屏优化该如何去做？

1.使用路由懒加载

2.非首屏组件使用异步组件

3.首屏中不要的组件延迟加载

4.静态资源放在CDN上

5.减少首屏上JS、CSS等资源文件的大小

6.使用服务端渲染

7.尽量减少DOM的数量和层级

8.使用精灵图请求

9.做一些loading

10.开启Gzip压缩

11.图片懒加载

7.vue3性能为什么比vue2好?

1.diff算法的优化

2.静态提升

3.事件侦听缓存

8.vue3为什么使用proxy？

1.proxy可以代理整个对象，defineproperty只代理对象上的某个属性

2.proxy对代理对象的监听更加丰富

3.proxy代理对象会生成新的对象，不会修改被代理对象本身

4.proxy不兼容ie浏览器

9.说一下你对组件的理解

可以重复使用的vue实例，独一无二的组件名称

可以抽离单独的公共模块

提高代码的复用率

10.你是如何规划项目文件的？

public

图标、index.html、img

src

api

asserts

components

按分类再次划分子目录

plugins

router

static

styles

utils

views

App.vue

main.js

package.json

vue.config.js

11.是否使用过nuxt.js?

是基于vue的应用框架，关注的是渲染，可以开发服务端渲染应用的配置

SSR:服务端渲染

好处：SSR生成的是由内容的HTML页面，有利于搜索引擎的搜索，优化了首屏加载时间

SEO:优化搜索引擎

SPA的应用不利于搜索引擎SEO的操作

12.SEO如何优化？

1.SSR

2.预渲染 prerender-spa-plugin