最近vue3發佈了 帶你們掌握下vue3的快速使用

安裝最新版vue-cli   npm install -g @vue/cli
vue -V 查看vue的版本 
vue create建立項目
手動選擇功能,選擇router vuex 和 css預處理,其它選擇默認
命令行進入項目   這裏 vue-cli 建立的是vue2.6版本的項目
vue add vue-next 升級咱們的vue到3.0版本
能夠看到成功的安裝了 vue-cli-plugin-vue-next插件
vscode 打開咱們的項目 打開package.json文件
能夠看到vue升級到3.0beta版本
vue-router vuex 也是 4.0 alpha版本
vue3.0模版的編譯插件 vue-next插件
打開項目入口文件main.js 
能夠看到新版本咱們使用  createApp 建立vue實例
以前vue2.6版本使用new Vue構造方法建立實例
use方法掛載 router和store  mount方法掛載到id爲app的節點
打開router.js  同步組件home   異步組件about
createRouter建立路由對象 以前vue2.6版本使用 new Router構造方法建立實例
打開home組件  看到home組件使用了helloworld自組件
打開helloworld組件 將組件精簡一下
npm run serve運行項目
瀏覽器訪問咱們的項目   img是咱們的logo  文本信息是helloworld組件的內容
二。打開helloworld組件
組件的msg屬性綁定再h1標籤上
咱們使用 vue3 api聲明組件的state狀態
導入reactive方法
reactive 數據響應式函數，內部經過es6的proxy api 來實現的，
setup 方法  用來替代 vue2.6中的 beforeCreate created
給你們提供一張vue2.6 和vue 聲明週期的對應關係圖
定義一個count state  定義自加方法來改變狀態
定義button綁定方法    
使用computed方法計算屬性  計算count 二倍的數值
使用watch方法監控狀態的改變
能夠看到state方法改變觸發了咱們的watch
經過ref方法關聯咱們的節點
只有在組件 onMounted 後才能使用節點
咱們改變下節點的顏色
watch方法 能夠經過參數value查看改變的值
三。切換到about路由
咱們在about組件裏演示vuex的使用
打開store.js  store裏的定義跟以前vue2.6同樣
咱們定義一個count狀態
定一個改變count的方法inc
打開about組件
vuex提供useStore方法來引用咱們的store
咱們定一個一個計算屬性關聯到store的state
綁定咱們的count 能夠看到store裏的count展現在了頁面上
commit mutation來改變咱們的store狀態

總體演示就到這裏 望你們有所收穫

文首發微信公衆號：ITvlog 公衆號裏有vue3的極速視頻操做

歡迎掃描二維碼關注公衆號，天天有3-5分鐘的視頻 讓你極速學習