Vue学习笔记（小满zs）

本文章记录一下我的学习笔记，供复习参考。🏆
向大佬学习！！！
⭐小满zs

Nodejs

Nodejs 三层组成 libuv（处理事件循环、I/O操作）第三方库（处理HTTP等） V8引擎（编译js代码）

Vite

vite是用到了一个软链接（npm run dev 启动的时候）

setup语法糖

不使用setup语法糖，就得把定义的内容return 出去 vue3都出了哪些语法糖？

vue中的指令:

v-text
v-html
v-if v-else v-else-if 如果为false，就会变成一个被注释掉的节点 v-show
v-on(事件绑定) 事件冒泡阻止冒泡事件 @click.stop
v-bind(属性绑定)
v-model 要配合使用ref和reactive
v-for(遍历使用)
性能优化的 v-once只渲染一次 v-memo中的条件成立可以跳过渲染

diff算法

为什么去操作虚拟dom，而不操作真实dom。
diff算法
无key:
1.patch的时候会替换节点
2.新增
3.删除
有key:
1.前序对比算法判断元素的type和key （和vue2的区别，头和头，尾和尾，不再交叉比较）
2.尾序对比算法
3.新节点如果多出，就挂载
4.旧节点如果多出来就卸载
5.特殊情况乱序（乱序位移）最长递增子序列

Ref

修改或者取值要加上.value
ref深层次的
shallowRef是浅层次的，.value后面的属性不变化
二者不能混用，会造成视图的更新
triggerRef
customRef(自定义ref) set get方法收集依赖，触发依赖更新

ref获取dom元素

<div ref="node"> 我要获取你</div>
//typescript
const node = ref<HTMLDivElement>();
console.log(node.value?.innerText)

Reactive

只接受引用类型的参数
不需要加.value
tip:@click.prevent可以组织form默认的提交行为
reactive创建的是一个proxy代理的对象，不能直接对它赋值
解决方案（
1.如果是对于数组的话，不直接赋值，而是使用数组的方法，push等等，注意可以解构赋值
2.将reactive改成对象，其中的一个属性是数组
）

readonly

const count = reactive({name:"zhangsan"})
//变成只读属性
const read = readonly(count)

shallowReactive 浅层次的（只到第一个属性的位置）

和shallowRef一样，和reactive同时使用的时候会收到影响

toRef、toRefs和 toRaw

toRef

toRef只能修改响应式对象的值
适用于对reactive对象进行解构赋值

toRefs

相当于toRef()的复数

//手写实现
const toRefs = <T extends object>(object:T) =>{
const map:any = {}
for(let key in object){
map[key] = toRef(object,key)
}
return map
} //使用
let {name,age} = toRefs(person)