2020年9月19日凌晨，尤雨溪大大正式發(fā)布了3.0版本汽抚，代號：One Piece
Vue 是第一個我們國人開發(fā)的框架抓狭，且簡單易于上手。現(xiàn)在迎來了3.0版本造烁，我相信會越來越好否过。

下面是3.0版本的一些特點

在 Vue 3 中，基于對象的 2.x API 基本沒有變化惭蟋，3.0 還引入了 [Composition API]苗桂，旨在解決 Vue 在大規(guī)模應(yīng)用中的使用痛點，實現(xiàn)了類似于 React 鉤子的邏輯組成和重用告组，比 2.x 基于對象的 API 更靈活的代碼組織模式和更可靠的類型推理煤伟。
Vue 3 與 Vue 2 相比，在捆綁大小 (tree-shaking 時減少了 41%)、初始渲染 (快了 55%)便锨、更新 (快了 133%) 和內(nèi)存使用 (少了 54%) 方面都有[顯著的性能提升]
Vue 3 的代碼庫是用 TypeScript 編寫的围辙，具有自動生成，測試和捆綁的類型定義放案，因此它們始終是最新的酌畜。Composition API 可以很好地處理類型推斷。Vetur 是我們的官方 VSCode 擴(kuò)展卿叽，現(xiàn)在利用 Vue 3 改進(jìn)的內(nèi)部鍵入功能支持模板表達(dá)式和 props 類型檢查。哦恳守，如果您愿意考婴，Vue 3 的打字完全支持 TSX。
為單文件組件 (SFC催烘，即 .vue 文件) 提出了兩個新特性：<script setup>和 <style vars>

1.Vue 3.0 項目初始化

npm install -g @vue/cli

安裝成功后沥阱，查看版本

vue -V
@vue/cli 4.5.6

初始化項目（有router和vuex就可以，其他的按個人喜好配置）

vue create vue3-test

升級vue 3.0項目

cd vue3-test
vue add vue-next
/*
  執(zhí)行上述指令后伊群，會自動安裝vue-cli-plugin-vue-next插件考杉，該插件會完成以下操作：
  安裝 Vue 3.0 依賴
  更新 Vue 3.0 webpack loader 配置，使其能夠支持 .vue 文件構(gòu)建（這點非常重要）
  創(chuàng)建 Vue 3.0 的模板代碼
  自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本舰始，如果未安裝則不會升級
  自動生成 Vue Router 和 Vuex 模板代碼
  完成上述操作后崇棠，該項目正式升級到vue 3.0
*/

2.Vue 3.0基本特性體驗（這里只說和2x版本的不同處）

// 2x 版本 router
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

// 3.0 版本 router（與2x的變化不大，只是之前采用構(gòu)造函數(shù)的方式丸卷，這里改為使用createRouter來創(chuàng)建Vue Router實例）
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

// 2x 版本 store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// 3.0版本 store（與2x的變化不大枕稀，只是之前采用構(gòu)造函數(shù)的方式，這里改為使用createStore來創(chuàng)建Vuex實例）
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
});

.browserslist

根目錄中多了一個.browserslist文件谜嫉，可以指定項目的目標(biāo)瀏覽器的范圍
用于轉(zhuǎn)譯的 JavaScript 特性和添加CSS 瀏覽器前綴萎坷，可以減少兼容代碼提高代碼質(zhì)量
如果想少一個文件，你也可以在package.json中添加browserslist字段沐兰，參數(shù)是一個數(shù)組

修改 store/index.js

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    test: {
      a: 1
    }
  },
  mutations: {
    setTestA (state, value) {
      state.test.a = value
    }
  },
  actions: {
  },
  modules: {
  }
});

修改 views/About.vue

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <button @click="add">add</button>
    <button @click="update">update a</button>
  </div>
</template>
 
<script>
import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
/*
  ref 賦值單個變量，使用要這樣 count.value
  reactive 賦值對象住闯，可直接使用
  computed 計算屬性
  watch 監(jiān)聽變量
  getCurrentInstance 獲取當(dāng)前組件的實例方法
*/
export default {
  setup () {
    // ref
    const count = ref(0)
    const add = () => {
      count.value++
    }
    // reactive 
    const data = reactive({
      a: 1,
      b: 2,
      c: 3
    })
    console.log(data, data.a)
    // watch 
    watch(() => count.value, val => {
      console.log(`count is ${val}`)
    })
    // computed 
    const doubleCount = computed(() => count.value * 2)
    // getCurrentInstance 
    const { ctx } = getCurrentInstance()
    console.log(ctx.$router.currentRoute.value)
    const a = computed(() => ctx.$store.state.test.a)
    const update = () => {
      ctx.$store.commit('setTestA', count)
    }
    return {
      count,
      doubleCount,
      add,
      a,
      update
    }
  }
}
</script>

總結(jié)

vue 3.0都寫在setup里瓜浸，以前的所有數(shù)據(jù)狀態(tài)都寫在data里，
vue 2.0所有的方法都寫在methods里比原，而現(xiàn)在可以根據(jù)功能模塊把狀態(tài)和方法劃分在一起斟叼，更利于模塊化。

Vue 3.0新文檔網(wǎng)站春寿。如果是 Vue 2.x 用戶朗涩，訪問遷移指南。