Vue 2 向 Vue 3 迁移时的变化开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 26 天，

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 26 天，点击查看活动详情

前段时间进行了部分 Vue2 代码到 Vue3 的迁移，其中会遇到一些语法或是报错问题，有时大部分是因为一些语法在 Vue3.x 被废弃。

.native 做的作用是：在组件的根元素上监听一个原生事件

如果遇到了 '.native' modifier on 'v-on' directive is deprecated' 的提示，是因为 Vue3 不再使用“v-on”指令上的“.native”修饰符。官方解释

Vue2 中自定义组件如果想要直接使用 @click 是不生效的，需要配合 .native 修饰符来触发点击事件。在 Vue3 中错误的写法：

<myComp v-on:focus.native="onFocus"/>

正确的写法：

<MyComponent v-on:focus="onFocus"/>

.sync 修饰符可以简化父子组件传值，实现子组件与父组件的双向绑定（由于 v-model 只有一个，当需要多个双向绑定的时候，可以使用 sync 来修饰）

Vue2 的写法：

<myComp v-bind:visible.sync="visible"/>

Vue3 的写法：

<myComp v-model:visible="visible"/>

1、Unexpected mutation of "datas" prop vue/no-mutating-props

出现这问题的原因是 Vue 是单向数据流，在父组件传参给子组件的参数被直接修改时，就会报错。

解决方法：

"vue/script-setup-uses-vars": "off"

在根目录下的 vue.config.js 中的 rules 中可作如下配置（或是 .eslintrc.js）：

1、样式穿透 /deep/和::v-deep的写法都被 vue3 弃用，需要改为:deep()

2、v-bind 为样式绑定变量变量或者对象都可以使用，对象需要加引号

const H = ref('500px')
const Style = ref({
  color: 'red'
})
:deep(.input) {
    width: v-bind(H);
    background: v-bind('Style.color');
}