Vue3 路由组件警告 component with `markRaw` or using `shallowRef...

发布网友 发布时间：2024-10-02 16:29

我来回答

共1个回答

热心网友 时间：2024-10-19 03:40

在使用ant-design-vue进行开发时，可能会遇到一个关于Vue组件的警告信息：`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`.`。此警告表明存在组件被包装成响应式对象的情况，可能带来不必要的性能损耗。

问题通常出在文件路径为`/src/layouts/BasicLayout.vue`的组件内部，但解决时可能陷入定位错误，以为问题出在组件内部。实际上，该警告指向的是组件被包装成响应式对象的状态，并非组件本身的代码问题。

解决步骤如下：

首先跳出定位误区，寻找引用了`BasicLayout`组件的功能代码，特别是可能位于`router`中的动态路由筛选后的路由对象，该对象可能存储在`store`中，包含`BasicLayout`组件引用。

根据官方建议，将直接引入`BasicLayout`组件修改为使用`shallowRef`包装组件，避免组件成为完全响应式对象。

示例代码如下：

javascript
import { shallowRef } from 'vue'
component: shallowRef(BasicLayout)

注意事项：

在解决问题时，除了直接定位到`BasicLayout`组件，如果项目中还有类似`RouterView`这样的组件同样引用了`BasicLayout`，也应逐一使用`shallowRef`进行包装，以确保整个应用性能优化。

在进行Vue3、Vite、AntdV和TypeScript技术栈的后台项目开发时，遇到此类性能警告问题，遵循上述方法进行排查与优化，能够有效提升应用性能。

热心网友 时间：2024-10-19 03:39

在使用ant-design-vue进行开发时，可能会遇到一个关于Vue组件的警告信息：`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`.`。此警告表明存在组件被包装成响应式对象的情况，可能带来不必要的性能损耗。

问题通常出在文件路径为`/src/layouts/BasicLayout.vue`的组件内部，但解决时可能陷入定位错误，以为问题出在组件内部。实际上，该警告指向的是组件被包装成响应式对象的状态，并非组件本身的代码问题。

解决步骤如下：

首先跳出定位误区，寻找引用了`BasicLayout`组件的功能代码，特别是可能位于`router`中的动态路由筛选后的路由对象，该对象可能存储在`store`中，包含`BasicLayout`组件引用。

根据官方建议，将直接引入`BasicLayout`组件修改为使用`shallowRef`包装组件，避免组件成为完全响应式对象。

示例代码如下：

javascript
import { shallowRef } from 'vue'
component: shallowRef(BasicLayout)

注意事项：

在解决问题时，除了直接定位到`BasicLayout`组件，如果项目中还有类似`RouterView`这样的组件同样引用了`BasicLayout`，也应逐一使用`shallowRef`进行包装，以确保整个应用性能优化。

在进行Vue3、Vite、AntdV和TypeScript技术栈的后台项目开发时，遇到此类性能警告问题，遵循上述方法进行排查与优化，能够有效提升应用性能。