案例
这里我写一个动态组件,切换登录和注册
由于对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: ƒ}