2022-09-11 面试题:vue(三) vue组件初次渲染和更新的过程,vue页面之间是如何传值的,为什么做首屏优化以及如何做首屏优化

1.描述一下vue组件渲染和更新的过程

回答:

vue组件初次渲染的过程

解析模板为render函数,
触发响应式,监听data属性的getter和setter
执行render函数,生成vnode.patch(elem,vnode)

vue组件更新的过程

修改data,触发setter(此前在getter中已被监听),
重新执行render函数生成newVnode,patch(vnode,newVnode)

2.什么是组件?为何要封装组件?

回答:

封装组件的好处

为代码解耦,提高代码的复用率

组件的定义

页面上可以复用的都称为组件,它是HTML,CSS,JS的聚合体
组件相当于库,把一些能在项目中复用的代码进行需求性封装

3.vue页面组件之间是如何传值的?

回答:

• 使用vue-router通过跳转链接带参数传参
• 使用本地缓存localStorage
• 使用vuex数据管理传值

4.computed,watch和methods的区别是什么?

• methods:只要发生重新渲染,methods调用总会执行该函数
• computed:计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值
• watch:用于观察和监听页面上的vue实例,使用场景:在数据变化的同时进行异步操作,或是比较大的开销,

4.为什么要做首屏优化?如何做首屏优化?

回答

做首屏优化的原因

首屏时间的快与慢，直接影响到了用户对网站的认知度。
所以首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。

实现首屏优化的做法

• css模块化加载，对应模块下的css交给js或jsonp请求返回
• js懒执行，有交互才执行
• 图片在其他屏（非首屏）都采用懒加载的模式，这样既能节省流量，也能减少请求数或延迟请求数。
• 服务器方面：

1. 少量静态文件的域名，图片与iconfont均是放在同一个域下，减少DNS的解析事件，最好做到域名收敛。
2. 模块化接口的支持。
3. 首屏内容最好做到静态缓存