vue中的key的使用,我们如何有效的使用它。以及相关的一些(ref)

1、上一篇博客中我们说了,vue的源码中有个isSameVNodeType方法,我们用它来判断key是否相等,来判断新老节点。
在v-for循环中,key的作用是:通过判断newVnode和OldVnode的key是否相等,从而复用与新节点对应的老节点,节约性能的开销。
2、那么我们key的使用有什么注意的呢?
①我们平常使用index作为key,这个方法是错误的
当我们使用inde作为key的时候,无论我们怎么样移动删除节点,到了diff算法中都会从头到尾依次patch。这样diff算法都没有用上,所有的节点都没有有效的复用。
②用index拼接其他的值作为key。
当我们用index拼接其他的值作为key的时候,所有的节点都找不到对应的key,这样就导致所有的节点都没有有效的复用。
③正确的写法,我们用有效值id作为key,这样就可以保证每个节点都起到了复用,就有效的使用到了diff算法。

vue3中的一些内置方法

首先我们说下ref
ref是vue3中的实现响应式的方法,reactive也是。ref本质也是reactive,一般ref是用于某个变量想要变成响应式的时候我们去用它,reactive的话就是针对复杂数据类型对象的响应式,如果变量使用它也行就是比较麻烦,取值的时候还得.value。
然后我们使用ts的话,ref还有个interface写法,也就是Ref。

import {ref,Ref} from "vue"
let msg:Ref<string>= ref("阿鑫") ;
let notRef:number = 1;

还有个isRef

import {ref,Ref,isRef} from "vue"
let msg:Ref<string>= ref("阿鑫") ;
let notRef:number = 1;
console.log(isRef(msg))  //true
console.log(isRef(notRef))   //false

shallowRef 和triggerRef

import {shallowRef,triggerRef} from "vue"
let message = shallowRef({age:"15"})

message.value.age ="28"  //这样改不了的,因为它里面的对象的属性不是响应式的

//我们可以这样
message.value = {age:"28"}   //这样是可以的

//triggerRef与shallowRef配合使用
message.value.age ="29" //这样不行加上下面的triggerRef
triggerRef(message)  //这样就改变了,我认为跟之前的vue2的$set很像

//这里会有个问题。ref的更新会触发shallowRef的视图更新。
//vue源码中ref更新会调用createRef,createRef会调用refImpl,然后refImpl方法中get的取值会trackRefValue,set值的时候会调用triggerRefValue与triggerRef的底层实现逻辑一样,掉了同样的方法,这样就导致shallowRef的视图更新,之前说了shallowRef可以跟triggerRef绑定使对象的属性改变并且触发视图的更新。

customRef明天说

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>