vue3学习笔记

1.vue3是由ts重写的，由proxy实现的响应式数据

2.优点

1，性能比vue快了1.2~2倍。

a.diff算法中与上次节点比较时只比较带有静态标记的。

b.静态提升

对于不更新的元素会做静态提升，只会被创建一次，下次渲染时直接复用。

c，监听器缓存

onclik会被视为动态绑定，所以每次都会去追踪它的变化，但是由于是同一个函数，所以没有追踪变化，而是缓存起来直接使用。

b，ssr渲染

当有大量静态内容时，这些内容会被当做纯字符推进buffer里面，即使存在动态绑定，也会通过模板插值嵌入进去，这样会比虚拟dom渲染快上很多，当这些金泰内容大到一定量级，会用_createStaticVNode方法在客服端生成一个static node，这些静态node会被直接innerHtml。

只比较带有静态标记的，而vue2是全量比较

2，支持按需导入体积比vue2更小

3，组合api（类似于react hook）

4，更好的ts支持

5，暴露了自定义渲染api

6，更先进的组件

3.setup

1，setup执行时机是在beforeCreate之后，create之前，因此它没有data数据和$vm对象，所以在setup中是不能使用data的数据。

2，因为没有this，所以vue为了避免我们错误使用，把this定义为undifine。

3，setup中也没有methods。

4.setup只能是同步的函数，不能是异步的

4.reactive

1，reactive必须传递对象，而且只能是数组或者自定义对象，像Date这些内置对象是无法让数据响应式的。

5.ref

1，ref本质上就是reactive，即使他传入的不是对象，也会转化为{value:值}的形式。

2，在template中不需要使用.value,在script标签中需要使用.value。

6.递归监听

1，ref,reactive默认是递归监听的，把对象每一层都包装成了一个proxy对象，所以很耗费性能。

7.非递归监听

1，shallowReactive，只监听第一层的变化。

2，sahllowRef，只监听value的变化，可以通过tiggerRef（）来控制变化，注意只有ref有tiggerRef，而没有triggerReacive，shallowRef本质是sahllowReactive。

3，一般情况下使用递归监听，只有当监听的数据量比较大时才使用非递归监听。

8.toRow

1，拿到reactive的原始数据，原始数据是reactive的引用，修改原始数据会改变reactive，但是不会触发视图的更新，对于不需要视图更新的操作极大的提高了性能。

2，拿ref中的原始数据需要拿.value中的数据

9.markRow

1，使一个数据永远不会被追踪

10.toRef

1.使数据与响应式数据关联起来，并且不触发视图的更新

2.接受2个参数：对象和属性，使用.value获取

11.toRefs

1，接受一个对象，把对象所有属性都toRef，接受一个对象，使用.属性.value获取

12.custemRef

为什么要自定义ref？

setup不支持async await，为了避免在setup中出现大量回调函数，所以可以把回调函数放到custemref中

13，获取元素

在setup中let box=ref(null),然后暴露出去，在template中ref=box，然后在onMounted中获取。

14.readonly，shallowReadonly，isReadonly

1，readonly：创建一个只读的数据，并且是递归只读

2，shallowReadonly：创建一个只读数据，不是递归只读，只有第一层是只读的

3，判断是否是只读的

4，readonly与const的区别：

const是赋值保护，不能给变量重新赋值,readonly是属性保护，不能给属性重新赋值