复盘文档

64 阅读8分钟

Vue3基础部分:

setup函数:
特点:
1、一个组件选项,作为组合Api的起点;
2、在beforeCreate钩子前执行,组件实例创建前
3、函数不能用this
4、模板用到的数据需要在setup中返回


组合式Api的生命周期:
V2中:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
actived
deactived
V3中:
setup 创建实例前
onBeforeMount 挂载Dom前
onMounted 挂载Dom后
onBeforeUpdate 更新组件前
onUpdate 更新组件后
onBeforeUnmount 卸载销毁前
onUnmounted 卸载销毁后
onActived 组件被激活
onDeactived 组件被失活

reactive函数:
定义响应式数据,是一个函数,定义复杂数据类型,成为响应式数据

ref函数:
定义响应式数据,是一个函数,定义简单数据类型(也可以定义复杂数据类型),成为响应式数据
常用:定义简单数据类型,比如对数据类型未知情况时,就要用ref(null)初始化值
使用:获取值时要.value,而在模板中不需要.value(通过判断__v_isRef是否为true,去自动解包)

toRef函数:
转化响应式对象中的某个属性为单独的响应式数据(比如代替:返回一个对象,模板中通过点语法,找到属性值;因为解构响应式数据对象,是一个普通的对象)
使用:toRef(对象,'属性名')

toRefs函数:
转化响应式对象中的所有属性为单独的响应式数据,对象为普通对象
使用:toRefs(响应式对象),然后就可以使用解构赋值到setup函数中了

unref函数:
unref(name)   相当于 name.value
内部:参数是ref,则返回参数的value,否则直接返回参数本身(val = isRef(val) ? val.value : val)

triggerRef函数;
配合 shallowRef 用的,并且 shallowRef 传入的是个引用类型,手动执行与 shallowRef 关联的任何作用 (effect)

父传子:
父组件通过v-bind传值,子组件通过props接收,如果要处理父组件的数据可以取setup的第1个参数props

子传父:
子组件通过setup的第2个参数context中的emit方法,其他和V2中的类似

.sync:
一般写法:<Son :money="money" @update:money="fn"></Son>
V2中写法:<Son :money.sync="money"></Son>  father中:emit('update:money''50')
V3中写法:<Son v-model:money="money"></Son> father中:emit('update:money''50')

父传孙:
provide 和inject,V3中需要从vue中导入provide、inject使用
使用:provide('name', value),inject('name')

readOnly:
一般不用readOnly(值),如果担心子组件的数据被修改,用readOnly包裹使其不能修改,使proxy的set方法被劫持
传入的值可以修改,但是返回的值不能修改

判断Api:
isRef,...
isProxy,检查是否由reactive或者readOnly创建的proxy
isReactive,检查是否由reactive创建的,或者readOnly包裹了reactive,也会返回true
isReadonly,检查是否由readOnly创建的只读proxy
toRaw,返回reactive或者readonly代理的原始对象(不建议使用,调试使用)
shallowReactive,跟踪浅层次的响应
...

Vue3this问题:
(由对象转为函数式编程)
1this不会指向组件实例
2、在setup被调用前,data、computed、methods等都没被解析

computed:
函数中一般是个getter,可以写一个箭头函数;如果要修改就是一个对象,computed({set(){}, get(){}})

watch:
watch(message ,(newVal,oldVal)=>{},{immediate,deep})
watch(fn  ,(newVal,oldVal)=>{})
默认对reactive开启深度侦听,

watchEffect:
1、默认会立即执行,执行时会自动收集依赖,
2、有一个返回值,是一个结束监听的函数

setup编译时的语法糖:<script setup><script>
1、不要写setup函数,免得返回每个对象,代码简洁
2、代码会被编译成setup函数
3、顶层绑定默认会被暴露给模板,即直接使用
4、使用const props = defineProps({name:{type,default}})、const emits = defineEmits(['events'])
     在子组件中需要暴露defineExpose({msg}),才能在父组件中通过ref访问这个方法

微信支付问题:

前端:调用requestPayment发起支付
后端:生成参数,确认/保存结果
微信:通知支付结果,验证用户权限

客户端:下单,支付,查询支付
服务端:准备签名,验证支付,记录交易

支付的二维码都在的话就,一直短轮询

遇到过什么问题(二面):

问题1:物流高拍仪功能

背景:由于同事离职,对接他的需求。其中涵盖了这个功能, 高拍仪因为机器的编码不同,对应的技术文档也不同,需要 找技术人员要二次开发文档,关键是找遍互联网也找不到相 吻合的文档,所以我只能找个相似的,另一家高拍仪公司:良田官网,打 电话加入了技术开发群,并要到了技术文档,通过修改这个js方法调用Api成功。

问题2:水印功能

第一部分:如何生成水印? 在区域加一个div,加一个背景图(使用canvas来画图)在repeat加重复属性,通过定位覆盖到div上。具体实现在img.js文件中,通过计算属性,然后创建一个canvas(createElement),设置字体大小,把文字通过fillText()方法画到画布上去,可以设置旋转的画布,字体就斜体了。

*第二部分:如何防止篡改? 通过MutationObserver监听DOM的变化,通过 childList: true( 观察目标子节点的变化,是否有添加或者删除);attributes: true(观察属性变动),subtree: true (观察后代节点,默认为 false) 。具体实现在Watermark.vue文件中,设置样式在style内联在组件中,使用watchEffect来监听,里面设置内联样式(动态生成div且不用class去设置样式),防止在调试工具修改在MutationObserver的回调函数中,通过里面的observer设置参数即监听的对象(监听不到class样式表所以采用内联样式),在回调函数加入设置水印的方法,当我们在控制台中删除节点时,方法中当前元素div跟遍历移除的dom元素做对比,如果相等,就会重新执行生成这个canvas的方法;那么在控制台修改内联样式时,通过当前元素div跟遍历出修改的dom做对比,如果相等就会监听到修改了,重新执行生成canvas的方法。所以,当在控制台删除dom节点或者修改内联样式都会先移除这个canvas再迅速生成一个,dom节点会快速更新,使其不能更改。 *

项目开发完的优化:

1、代码的优化: 在开发之初控制按钮的权限,是通过获取登录的接口去判断显隐,后面按钮多了,就设置了自定义指令v-auth或者全局的鉴权函数this.$auth,通过后面暴露一个auth方法(里面引入vuex存储的鉴权信息,通过数组的some函数来判断true和false),然后绑定到自定义指令中,通过注册事件名,并在第二个对象中,执行mounted钩子时,如果为false,通过传入bind.value给这个函数,函数通过el.remove()方法移除

2、性能的优化: 预解析:有的项目中会引入部分域外的资源,虽然页面的dns会有缓存,但是在组件内的其他域名(图片、js)解析不了。所以让浏览器提前解析资源怎么做?通过在head的顶层写一个link(dns-prefresh),但是如何收集框架中的资源。主要写一个工具,找到打包后资源中的三大件,通过读取文件结合、node工具库找到这些域名,再写入文件。最后在scripts命令中,除了build再加上允许这个js的命令然后打包后的文件就会出现介个link再head顶层。

工作中哪些让成就感的事情:

1、比如跟同事分配的页面中,有相似的dom结构,在产品那边没有要求的情况下, 我做了一个简单的动画效果,因为从用户的角度出发,没有动画比较生硬,上 线的测试环境中,领导觉得我这个效果好,然后就让我同事复用我这种css动画。

2、比如有一个员工选择的业务组件,开始只有我的部分有,后面其他人的页面也有, 就封装了一个组件,里面有tree状结构和table等,需求不断在迭代,然后这个部分 的代码也就是我在跟进。

白屏问题优化:

*原因:

1、资源文件过多、过大

2、服务器响应时间太长

3、http请求太多

4、dns解析优化(dns缓存优化,dns预加载策略,稳定的dns服务器)

*解决:

1、服务端处理(数据库存储优化)

2、客户端处理(html\css\js优化,使用骨架屏,采用异步组件,使用缓存,资源预加载,图片懒加载)

应用场景:比如大屏中,有多次循环重组件,会有长时间的白屏,通过谷歌调试工具performance怎么优化,总的时间不变,但是出现一部分显示一部分(一帧一帧显示),设置一个defer函数,怎么实现(给一个默认帧数1000),通过原生的 requestAnimationFrame函数(重绘之前调用,返回定时器的编号)进行数据风格,分批次渲染,在里面给个判断如果帧数没有达到,就递归执行,并且返回一个函数。

思考:页面中存在大量数据,修改一小部分导致卡顿的问题。因为vue是以组件为粒度去更新的,所以将功能模块划分清楚、减小冗余。可以将大量的数据模块单独放在一个组件,会使速度提升。