vue3.0笔记

V3如何变快的

1. 优化diff算法；v2中虚拟DOM是进行全量对比；v3新增静态标记，只比较有静态标记的。
2. 静态提升；v2无论元素是否参与更新都会重新渲染；v3对不参与更新的元素做静态提升，只会创建一次。
3. 事件监听器；默认情况下click动态绑定，追踪变化。v3缓存使用。

reactive

let obj = {name:'测试',age:18}

let state = reactive(obj)

obj.name = 'hello'

reactive 修改原来数据，数据发生变化，但是UI不更新，只有通过包装后的对象修改才会触发更新。ref的本质就是reactive。

非递归监听和递归监听

ref/reactive都属于递归监听，shallowReactive（只有最外层的属性变化，才会触发试图更新）和shallowRef（ref最外层属性value，只有它变化，视图才会更新）

shallowRef和triggerRef配合使用，主动去更新视图

toRaw

获取reactive响应式数据的原始数据

要想获得ref响应式数据，创建时传入的那个数据，就必须明确的告诉toRaw要获取的.value，toRaw(state.value)

let obj1 = toRaw(state)

obj === obj1 true

obj1.name = 'hello'

每次修改都会更新UI界面，其实是非常的消耗性能的。不需要更新UI界面的时候就可以toRaw办法拿到原始数据进行修改。

readonly

有些数据，我们要求对用户是只读的，此时可以使用 readonly() 函数，

创建只读数据，会显示在UI上，递归只读

shallowReadonly

类似于浅响应，shallowReadonly() 定义浅只读数据，这意味着，深层次的对象值是可以被修改的，在 Vue 内部 props 就是使用 shallowReadonly() 函数来定义的

markRaw() 函数用于让数据不可被代理，数据永远不被追踪

unref给它一个值，如果这个值是 ref 就返回 .value，否则原样返回。

ref和toRef

ref的本质是拷贝，与原始数据没有引用关系。基本类型ref后改变原始数据必变，引用类型ref后改变原始数据改变

toRef的本质是引用，与原始数据有关联

toRef和Ref都是用来创建响应式数据的