升级Vue3踩坑记录

[yulimchen]

最近对简陋的 vant H5 项目模板进行了 Vue3 的升级，在此记录一下过程~

1. 依赖升级

• 用 vue-cli4 脚手架创建个 vue3-demo 项目，对比两个项目的依赖进行升级

  • 这里贴一下 package.json 的 changes

  

  • 修改好后执行 yarn 进行依赖安装

2. Vue3 实例创建

• Vue3 的创建实例方法改变，不再是 new Vue

// Vue 2 main.js
import Vue from 'vue'
import App from './App.vue'
//...
new Vue({
  render: h => h(App)
}).$mount('#app')

// Vue 3 main.js
import { createApp } from 'vue'
import App from './App.vue'
//...
const app = createApp(App)
app.mount('#app')

3. 注册全局组件 v1

• Vue3 注册全局组件的方法也变了

// Vue 2 main.js
import Vue from 'vue'
import {
  Button
} from 'vant'

Vue.component('van-button', Button)  //  Vue.use(Button)

// Vue 3 main.js
import { createApp } from 'vue'
import App from './App.vue'
import {
  Button
} from 'vant'

const app = createApp(App)
app.component('van-button', Button)  //  app.use(Button)

app.mount('#app')

4. 注册全局组件 v2

稍微封装一下

// src/plugins/registerVant.js
import {
  Field,
  Cell,
  CellGroup,
  Button,
  Icon
} from 'vant'

const componentList = [
  Field,
  Cell,
  CellGroup,
  Button,
  Icon
]

export function registerVantComp(app) {
  componentList.forEach((comp) => {
    app.use(comp)
  })
}

// main.js
// ...
import { registerVantComp } from '@/plugins/registerVant'
registerVantComp(app)

5. 移除废弃 API

• 在 Vue2 组件会用 v-on="$listeners" 来接收事件，但是在 Vue3 中 $listeners 已被移除，事件和属性统一用 v-bind="$attrs" 来接收，详情见文档。

<!-- Vue2 -->
<div v-on="$listeners"/>

<!-- Vue3 -->
<div v-bind="$attrs" />

5. 老朋友 this

Composition API 应该是 Vue3 最受关注的新特性了，使用 Composition API 的话就要和熟悉的 this 说拜拜了。（当然在 Vue3 继续使用以前的 Optiosn API 也是可以的）

// vue2
export default {
  name: 'Demo',
  props: {
    foo: {
      type: String,
      default: '111'
    }
  },
  data() {
    return {
      bar: 123
    }
  },
  mounted() {
    console.log(this.foo) // '111'
    console.log(this.bar) // 123
    this.$emit('emitEvent', this.bar)
  }
}

setup 方法第一个参数为 props，第 2 个参数 ctx 接近 Vue2 中的 this，但不完全相等！只是选择性地暴露部分属性，主要有 attrs，emit，slots。

// vue3
import { onMounted } from 'vue'

export default {
  name: 'About',
  props: {
    foo: {
      type: String,
      default: '111'
    }
  },
  setup(props, ctx) {
    const bar = 123
    onMounted(() => {
      console.log(props.foo) // '111'
      console.log(bar) // 123
      ctx.emit('emitEvent', bar)
    })

    return {
      bar
    }
  }
}