The blog from yulimchen

升级Vue3踩坑记录

最近对简陋的 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
    }
  }
}

yulimchen / blog Goto Github PK

blog's Introduction

blog

blog's People

Contributors

Watchers

blog's Issues

升级Vue3踩坑记录

1. 依赖升级

2. Vue3 实例创建

3. 注册全局组件 v1

4. 注册全局组件 v2

5. 移除废弃 API

5. 老朋友 this

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent