vue3中reactive和shallowRef的区别

案例

这里我写一个动态组件，切换登录和注册

由于对vue3不够熟悉，就使用常规的reactive，然后控制台有警告信息，Vue接收一个组件，该组件被设置为响应对象。这可能会导致不必要的性能开销，应该通过用“markRaw”或用“shallowRef”代替“ref”来避免这里我用的是reactive提示说替代ref，其实是因为reactive内部就是用ref实现的它们其实是一个东西，因为用reactive会递归响应内部的所有层级性能开销会比较大，shallowRef创建一个 ref ，将会追踪它的 .value 更改操作，但是并不会对变更后的 .value 做响应式代理转换。

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  {__scopeId: "data-v-a49090ce", __hmrId: "a49090ce", __file: "src/views/login/login.vue", setup: ƒ, render: ƒ}  

修改之后