作為前端開發(fā)者，這幾天想必大家都看到了Vue3.0的beta版新聞了，是的，尤大大在4.17號微博曬出了Vue3.0的beta鏈接，不少FEer開始興奮，不過也有不少其它聲音：『我學不動了』、『這不就是React』、『啥時候出正式版』；

Vue3.0-beta鏈接：https://github.com/vuejs/vue-next#status-beta

那么首先，我們先簡單看一下Vue發(fā)布版本的過程：Alpha - Beta - RC - 正式

所以，從截圖來看，還會經(jīng)歷RC階段才會有正式版本能用，大家不要過于著急，目前尤大正在全力開發(fā)配套基礎(chǔ)功能，比如腳手架、vue-router、以及生態(tài)插件等；

Vue3.0設(shè)計目標

•  更小
  •   全局 API 和內(nèi)置組件 / 功能支持 tree-shaking
  •   常駐的代碼尺寸控制在 10kb gzipped 上下
•  更快
  •   基于 Proxy 的變動偵測，性能整體優(yōu)于 getter / setter
  •   Virtual DOM 重構(gòu)
  •   編譯器架構(gòu)重構(gòu)，更多的編譯時優(yōu)化
•  加強API設(shè)計一致性
•  加強TypeScript支持
•  提高自身可維護性
  •   代碼采用 monorepo 結(jié)構(gòu)，內(nèi)部分層更清晰
  •   TypeScript 使得外部貢獻者更有信心做改動
•  開放更多底層功能

對于我們開發(fā)者來講，最關(guān)心的還是它的語法，實際上這塊變化非常大。雖然目前是beta版本，但我們依然可以嘗鮮，在本地創(chuàng)建Vue項目，并做一做Demo；

一、創(chuàng)建項目 

// 先升級vue-cli到4.x版本  
cnpm install -g @vue/cli  
// 通過腳手架創(chuàng)建項目，一路回車  
vue create vue3.0 

注：這一步實際上用的依然是2.x的版本

二、升級2.6到3.0beta版本 

// 安裝完vue/cli以后，可以使用vue add添加插件  
// 目前3.0對應(yīng)的是vue-next項目  
vue add vue-next 

安裝完vue-next以后，我們就發(fā)現(xiàn)本地項目已經(jīng)升級到了3.0. 打開main.js如圖：

左側(cè)目錄結(jié)構(gòu)沒有太大變化，main的語法卻大不一樣了；

前面我們提到Vue3.0更小，因為它支持Tree-Shaking，可以把每一個用到的API都抽取出來，通過上圖我們發(fā)現(xiàn)，可以只解構(gòu)出一個createApp函數(shù)，相比2.0簡化了很多。

三、LifeCycle介紹(Hooks)

Vue3.0中，生命周期方法已經(jīng)發(fā)生了很大變化，接下來我們對比一下：

四、Composition API介紹

實際上，起初定義的是Vue-Function-API，后經(jīng)過社區(qū)意見收集，更名為Vue-Composition-API.

接下來，我們介紹幾個變化大的Composition API：

•  reactive API
•  ref API
•  watch API變化
•  computed API變化
•  生命周期鉤子變化（參考上面）
•  TypeScript和JSX支持（暫時忽略）

reactive

作用：創(chuàng)建響應(yīng)式對象，非包裝對象，類似于在2.0的data中聲明變量。

它本身一種Hooks能力，用過React Hook的，實際上就等同于useState();大家估計很好奇，為什么叫reactive? 讓人莫名有一種你再抄襲React的感覺！

接下來，上硬菜： 

// 打開 App.vue，刪除多余代碼  
<template>  
  <div id="app">  
    <h1>{{title.name}}</h1>  
  </div>  
  <div>  
    // 此處可并列多個div，不再要求一個根元素了  
  </div>  
</template>  
<script>  
import { reactive } from 'vue'  
export default {  
  name: 'App',  
  setup(){  
    const title = reactive({  
      name:'歡迎學習Vue3.0'  
    })  
    return { title }  
  }  
}  
</script>  
<style>  
#app {  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style> 

頁面效果圖：

Ref

作用：創(chuàng)建一個包裝式對象，含有一個響應(yīng)式屬性value

它和reactive的差別，就是前者沒有包裝屬性value

接下來，上硬菜： 

<template>  
  <div id="app">  
    <h1>{{title.name}}</h1>  
    <div>{{user}}</div>  
  </div>  
</template>  
<script>  
import { reactive,ref } from 'vue'  
export default {  
  name: 'App',  
  setup(){  
    const title = reactive({  
      name:'歡迎學習Vue3.0'  
    })  
    const user = ref('河畔一角');  
    //如果需要修改值，可通過value  
    user.value = '河畔老師'  
    return { title ,user }  
  }  
}  
</script>  
<style>  
#app {  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style> 

效果圖如下：

事件處理

既然不用methods，那事件處理該怎么調(diào)用方法？

上硬菜： 

<template>  
  <div id="app">  
    <h1>{{title.name}}</h1>  
    <div>{{user}}</div>  
    <button @click="updateUser">修改名稱</button>  
  </div>  
</template>  
<script>  
import { reactive,ref } from 'vue'  
export default {  
  name: 'App',  
  setup(){  
    const title = reactive({  
      name:'歡迎學習Vue3.0'  
    })  
    const user = ref('河畔一角');  
    const updateUser = ()=>{  
      //如果需要修改值，可通過value  
      user.value = '河畔老師'  
    }  
    return { title , user, updateUser }  
  }  
}  
</script>  
<style>  
#app {  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style> 

效果圖：

onMounted/computed

作用：周期函數(shù)和計算函數(shù)

上硬菜： 

<template>  
  <div id="app">  
    <h1>{{title.name}}</h1>  
    <div>{{user}}</div>  
    <button @click="updateUser">修改名稱</button>  
    <div>當前count：{{computedCount}}</div>  
    <button @click="increment">修改count</button>  
  </div>  
</template>  
<script>  
import { reactive,ref,onMounted,computed } from 'vue'  
export default {  
  name: 'App',  
  setup(){  
    const title = reactive({  
      name:'歡迎學習Vue3.0'  
    })  
    const user = ref('河畔一角');  
    //如果需要修改值，可通過value   
    const updateUser = ()=>{  
      user.value = '河畔老師'  
    }    
    //生命周期方法  
    onMounted(()=>{  
      console.log('init mounted...')  
    })  
    // 初始化count值  
    const count = ref(0);  
    const increment = ()=>{  
      count.value++  
    }  
    // 調(diào)用計算屬性函數(shù)Hook  
    const computedcomputedCount=computed(()=>count.value*10)  
    return { title , user, updateUser,count,increment,computedCount }  
  }  
}  
</script>  
<style>  
#app {  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style> 

效果圖：

經(jīng)過以上幾個API講解，相信大家開始越來越激動了，語法新穎，簡潔凝煉，但大家需要有一個過渡期，剛開始肯定會很陌生；

實際上用法遠不止這些，包括父子傳遞、支持jsx語法等，我們這兒不做一一介紹了，大家可以自已通過第三方資料整理，了解更多Vue3.0的語法；

給大家提供幾個官網(wǎng)的API文檔：

https://composition-api.vuejs.org/#summary

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

尤大4.21直播回放地址：

https://live.bilibili.com/record/R14x411c7rW

上述源碼已經(jīng)上傳Github: https://github.com/JackySoft/vue3.0-demo

溫馨提示：目前Vue3.0是會兼容大部分2.x的語法，實際上主要的變化，在上面的Vue3.0設(shè)計目標里面已經(jīng)列出，我們主要的學習成本可能就在Composition API這塊，新增了很多組合API，它本身不依賴this指針，方便我們對邏輯做抽取封裝。

不知道大家是否能看懂這個圖！我上面提到的API文檔會有詳細介紹。