Vue学习--- vue3 集成遇到的部分问题与解决

构建异常

1. 问题：ESLint: Do not access Object.prototype method 'hasOwnProperty' from target o

报错解释：

ESLint 报错信息 "Do not access Object.prototype method 'hasOwnProperty' from target object" 指的是不应该从目标对象访问 Object.prototype 上的 

hasOwnProperty 方法。这是因为 

hasOwnProperty 是用来检查一个对象是否具有特定的自身属性，而不是继承自原型链的属性。如果不正确地使用，可能会导致意外行为或错误。

解决方法：

示例代码：

// 错误的使用方式
const obj = { hasOwnProperty: "test", prop: "value" };
if (obj.hasOwnProperty("prop")) { // 可能会意外触发obj自身的hasOwnProperty属性
  // ...
}
 
// 正确的使用方式
const obj = { prop: "value" };
if (obj.hasOwnProperty("prop")) { // 安全地使用Object.prototype的方法
  // ...
}
 
// 或者使用call方法
if (Object.prototype.hasOwnProperty.call(obj, "prop")) { // 确保安全
  // ...
}

2. 问题 ESLint: 'oldVal' is defined but never used. (no-unused-vars)

例如：

解决办法：

// eslint-disable-next-line no-unused-vars

3.问题 vue2 @keyup.enter.native 报错 vue3 使用报错

vue3 使用

@keyup.enter

4.问题 vue2 slot-scope vue3 报错

vue2 slot-scope="scope" vue3 #default="scope"

5.问题 vue2 solt vue3 报错

slot-scope 主要也是配合 slot 一块使用，在 2.x 版本中都是支持的，但 vue 3 中已经被官方废弃了。

vue 2.6.0 中引入，为具名插槽和作用域插槽提供新的统一的语法 v-slot 指令，用来代替 slot 和 slot-scope

v-slot:default 可以简写为 v-slot，或者使用 # 作为缩写。例如， 或 。

报错`slot` attributes are deprecated

解决方法

<template #title></template>
<template #title="{scope}"></template>

6. 问题 vue3 vue 组件 name 报错

export default {
  name: "Index"
}
解决办法
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Index"
  }

7.问题 vue2 @click.native.prevent vue3 报错

你应该直接在模板中使用@click.prevent来阻止默认事件

在Vue 3中，由于移除了.native修饰符，所以不再需要使用.native.prevent

vue2

<button v-on:click.native.prevent="doSomething">Click me</button>

vue3

<button @click.prevent="doSomething">Click me</button>

8.问题 vue2 @click.native vue3 报错

vue2 
<MyComponent @click.native="handleClick" />
vue3
<MyComponent @click="handleClick" />

9.问题 vue2 beforeDestroy() vue3报错

在Vue 2中，你可以使用 beforeDestroy 钩子来执行组件销毁前的清理工作。但在Vue 3中，应当使用 beforeUnmount。

10. 问题 vue2 @wheel.native.prevent vue3 报错

在Vue 3中，由于事件修饰符的变化，@wheel.native.prevent 已不再被直接支持。在Vue 2中，.native 修饰符用于监听组件根元素的原生事件，而 
.prev