安装

# cdn 引用
<script src="https://unpkg.com/vue@next"></script>
# npm 安装
npm install vue@next

网址

https://v3.vuejs.org/，语法介绍，大家可以去官网自己学习，下面主要讲一讲2.0和3.0的区别

新特性

全局API更改

import { createApp } from 'vue'

const app = createApp()

# 以下这些方法都需要先创建一个实例，全局方法已经无法使用了

2.x 全局API 3.x 实例API (app)

Vue.config app.config

Vue.config.productionTip 已移除

Vue.config.ignoredElements app.config.isCustomElement

Vue.component app.component

Vue.directive app.directive

Vue.mixin app.mixin

Vue.use app.use

Vue.nextTick 、render全局方法改为模块化

# 2.0
import Vue from 'vue'

Vue.nextTick(() => {
  // something something DOM-related
})
# 3.0
import { nextTick } from 'vue'

nextTick(() => {
  // something something DOM-related
})

#2.0
export default {
  render(h) {
    return h('div')
  }
}

#3.0
import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

删除的api（重点）

KeyCode 已移除不能用了

# 2.0
<input v-on:keyup.13="submit" />
  
  # 3.0
<input v-on:keyup.enter="submit" />

$on, $off and $once 实例化方法已移除

Filters 过滤器3.0已移除（重点、重点、重点），如果要继续使用请用计算属性代替。

#2.0
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    filters: {
      currencyUSD(value) {
        return '#39; + value
      }
    }
  }
</script>

#3.0
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    computed: {
      accountInUSD() {
        return '#39; + this.accountBalance
      }
    }
  }
</script>

移除组件的inline-template属性

总结

vue3.0相比2.0更改的东西还是蛮多的，官网上有专门的教程，叫我们如何将项目2.0升级到3.0。有兴趣的同学可以去官网看看。

最后希望大家多多评论、关注、点赞、转发，你们的支持，是我更新下去的最大动力。