# 常见问题
# 1、vue 控制台警告 Runtime directive used on component with non-element root node.
v-for 需要添加 key
# 2、vue props 使用 typescript 自定义类型
import { PropType } from 'vue';
type UserItem = {
id: string;
userName: string;
};
const props = defineProps({
data: {
type: Object as PropType<UserItem>,
default: () => {},
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3、Component 使用问题
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:
1
2
2
根据提示解决方法为：
import { defineAsyncComponent, markRaw } from 'vue'; // 使用 markRaw 方法包裹 defineAsyncComponent 导入的组件
const PageView = markRaw(defineAsyncComponent(() => import('./views/page-viewe.vue')));
1
2
2
# 4、Non-function value encountered for default slot. Prefer function slots for better performance.
使用 default 返回内容
import { h } from 'vue'
const showSpan = () => {
return h('span', {}, { default: () => xxx })
}
1
2
3
4
5
2
3
4
5
# 5、[DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq)
添加一层 form 标签
<form>
<input type="password" autocomplete="off" />
</form>
1
2
3
2
3
# 6、Uncaught DOMException: Failed to execute ‘postMessage‘ on ‘Window‘: #＜Object＞ could not be cloned.
JSON.parse(JSON.stringify(data))
1