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明天说