面试题-9

1.如何封装一个组件

1.使用Vue.extend()创建一个组件

2.使用Vue.components()方法注册组件

3.如果子组件需要数据,可以在props中接收定义

4.子组件修改好数据,要把数据传递给父组件，可以用emit()方法

原则:

把功能拆开

尽量让组件原子化,一个组件做一件事情

容器组件管数据,展示组件管视图

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

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

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

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

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

 

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

1.localtion.reload()

2.this.$router.go(0)

3.provide和inject

4.vue3和vue2有那些区别？

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

2.是否支持碎片

3.API不同

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

5.生命的周期不同

6.传值不同

7.指令和插槽不同

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

1.编码优化

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

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

keep-alive缓存组件

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

key值要保证唯一

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

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

2.加载优化

按需加载

内容懒加载

图片懒加载

3.用户体验

骨架屏

4.SEO优化

预渲染

服务端渲染

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

assets

compoents

按分类再次划分子目录

plugins

router

static

styles

utils

vies

App.vue

main.js

package.json

vue.config.js

1.SEO如何优化

1.SSR

2.预渲染 prerender-spa-plugin