前端發(fā)展百花放，一技未熟百技出。未知何處去下手，關(guān)注小編勝百書。 我是前端人，專注分享前端內(nèi)容!

本篇文章主要是，使用 vite 創(chuàng)建一個vue3 項目，實踐 vie-router4 vuex4 結(jié)合 componsition API 的使用。目的是讓未接觸過 vue3 的同學(xué)快速上手。

一、vue3.0 創(chuàng)建項目

vue3 創(chuàng)建項目的時候有兩種方式，第一種就是官方推薦的 vite 。另外一種就是使用 webpack 創(chuàng)建。

1.1、vite 創(chuàng)建項目

vite 需要 Node.js >= 12.x版本。所以使用 vite 搭建項目之前，請先檢查 node 版本!

運行 ：$ npm init vite@latest 命令，然后按照提示信息選擇創(chuàng)建項目的類型。具體的步驟可以參考《什么，你還使用 webpack?別人都在用 vite 搭建項目了》文章。

也可以通過附加命令行選項，指定使用的模板。如：

npm init vite@latest my-vue-app --template vue 

使用最新 vite 創(chuàng)建 vue 模板項目。

項目目錄如圖所示：

1.2、webpack 創(chuàng)建項目

使用 vue/cli 腳手架創(chuàng)建 vue3 項目時，需要升級 vue cli v4.5版本!使用 vue -V 檢查版本，如果版本過低時，請全局重新安裝。

npm install -g @vue/cli  

使用命令，開始創(chuàng)建項目：

vue create project-name 

選擇需要創(chuàng)建 vue3 項目，根據(jù)提示創(chuàng)建項目就可以了。

1.3、vite 與 webpack 相比優(yōu)缺點

在本篇文章內(nèi)，我們選擇 第一種方式 vite 創(chuàng)建一個 learn-vue3 的項目。

二、vue-router4

項目創(chuàng)建完成之后，我們要做的第一件事就是配置路由了，添加路由的時候，需要在 main.js 內(nèi)引入 router。

main.js 代碼：

import { createApp } from 'vue' 
import App from './App.vue' 
 
createApp(App).mount('#app') 

此時發(fā)現(xiàn)與 vue2 的創(chuàng)建實例完全不一樣，vue3 使用的是 createApp ，使用前需要先引入。

2.1、引入路由

在 vue3 中使用 vue-router 時，需要安裝 vue-router 4 。

npm install vue-router@4 

安裝之后可以在 package.json 文件中查看 vue-router 的版本。

{ 
  "dependencies": { 
    "vue": "^3.2.25", 
    "vue-router": "^4.0.12" 
  } 
} 

vue-router 4 的大多數(shù)的 API 是保持不變的，但是在 vue3 中以插件形式存在，所以在創(chuàng)建的時候有一定的改變。

新建 router 文件夾，新建 index.js 文件

// 1、按需引入方法 
import { createRouter, createWebHashHistory } from "vue-router" 
// 2、定義一些路由 
const routes = [ 
    // 每個路由都需要映射到一個組件 
] 
//3、創(chuàng)建路由實例 
const router = createRouter({ 
  routes, 
  history:createWebHashHistory("./") 
}) 
 
export default router 

 然后到 main.js 中，將路由掛載到實例上。

import { createApp } from 'vue' 
import App from './App.vue' 
import router from "./router/index" 
 
createApp(App) 
//整個應(yīng)用支持路由 
.use(router) 
.mount('#app') 

2.2、新建組件配置路由

在 src 目錄下，新建 pages 文件夾，新建 index.vue 文件：

<template> 
 首頁入口 
</template> 

在 router.js 文件內(nèi)，定義路由

const routes = [ 
 { 
  path:"/", 
  component:()=>import("../pages/index.vue") 
 } 
] 

然后在 App.vue 文件內(nèi)添加 router-view 容器。

<template> 
  <img alt="Vue logo" src="./assets/logo.png" /> 
  <router-view></router-view> 
</template> 

此時運行項目的時候就能看到新建的 index.vue 的內(nèi)容了。

三、vue-router4 結(jié)合 composition API 使用

3.1、composition API

composition API 中文叫做組合式API，它是 Vue3 特有的，同時 vue3 也能夠向下兼容 Options API。

setup 函數(shù)就是 composition API 的入口，是處于生命周期鉤子函數(shù) beforeCreate 和 created 兩個函數(shù)之間，所以 setup 中的屬性和方法在外部使用時，需要先 return 暴漏出去。

修改 index.vue 組件，采用 composition API 。

<template> 
 <div> 
  <input type="text" v-model="msg" /> 
 </div> 
</template> 
 
<script> 
export default { 
 setup() { 
  const msg = '前端人，前端魂' 
  return { 
   msg, 
  } 
 } 
} 
</script> 

3.2、響應(yīng)式數(shù)據(jù)

上述的實例中中，如果我們在 template 內(nèi)，打印 msg 的時候，就會發(fā)現(xiàn)響應(yīng)式失效。

<template> 
 <div> 
  <input type="text" v-model="msg" /> 
  {{ msg }} 
 </div> 
</template> 

是因為在 setup 內(nèi)地自定義屬性不具備響應(yīng)式能力。vue3 的響應(yīng)式原理是 通過底層代理 proxy 將數(shù)據(jù)包裝一下，使得具有響應(yīng)式。vue3 的響應(yīng)式原理詳情可查看《vue3 學(xué)習(xí)筆記 (五)——vue3 的 setup 如何實現(xiàn)響應(yīng)式功能?》

此處 msg 是一個基礎(chǔ)數(shù)據(jù)類型，可以通過 ref 包裝下數(shù)據(jù)，ref 使用之前需要從 vue 中先引入。修改 script 中的代碼

<script> 
import { ref } from 'vue' 
export default { 
 setup() { 
  const msg = ref('前端人，前端魂') 
  return { 
   msg, 
  } 
 } 
} 
</script> 

此時在 input 或在 setup 內(nèi)改變 msg 的值,如：

<script> 
import { ref } from 'vue' 
export default { 
 setup() { 
  const msg = ref('前端人，前端魂') 
  setTimeout(()=>{ 
   msg.value = "我是前端人" 
  },3000) 
  return { 
   msg, 
  } 
 } 
} 
</script> 

此時無論如何修改 msg 都會保證實時響應(yīng)。

與 ref 類似的還有 reactive 。ref 是讓基礎(chǔ)數(shù)據(jù)類型具有響應(yīng)式，reactive 是讓引用數(shù)據(jù)類型具有響應(yīng)式。

3.3、組合式內(nèi)如何使用路由?

一個項目中，導(dǎo)航選項卡是很常見的，在 App.vue 文件內(nèi)，加入兩個導(dǎo)航：

<template> 
 <router-view></router-view> 
 <router-link to="/">首頁</router-link> 
 <router-link to="/my">我的</router-link> 
</template> 

如果把上述路由跳轉(zhuǎn)方式修改成 push 時，如何修改呢?

composition API 內(nèi)使用路由時，需要先導(dǎo)入 userRouter 方法，調(diào)用該方法，生成 router。

如：

import { useRouter } from 'vue-router' 
const router = useRouter() 

router 是路由【導(dǎo)航對象】。

想要獲取當(dāng)前路由時，使用 useRoute 方法，如：

import { useRoute } from 'vue-router' 
const route = useRoute() 

 route 是當(dāng)前激活的路由狀態(tài)信息對象，包含所有路由中的參數(shù)，params, query 都屬于它。

修改上邊路由跳轉(zhuǎn)方式使用 push ，代碼如下：

<script > 
import { useRouter } from 'vue-router' 
export default{ 
 setup(){ 
  const router = useRouter() 
  function go() { 
   router.push({ path: '/my' }) 
  } 
  return{ 
   go 
  } 
 } 
} 
</script> 
 
<template> 
 <router-view></router-view> 
 <router-link to="/">首頁</router-link> 
 <button @click="go">我的</button> 
</template> 

路由傳參以及參數(shù)獲取，只需要把之前的 this.$router 換成 router 就可以啦。

四、vuex 4

vuex 是專為 vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式+庫。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

在 vue3 中使用的是 vuex4 。vuex4 提供了和 vuex3 相同的 API 。

安裝：

npm install vuex@next 

package.json 檢查版本

"dependencies": { 
 "vue": "^3.2.25", 
 "vue-router": "^4.0.12", 
 "vuex": "^4.0.2" 
} 

4.1、引入 vuex 狀態(tài)管理

vuex4 創(chuàng)建 store 實例時，使用 createStore 函數(shù)創(chuàng)建，createStore 在使用之前需要先引入。

在 src 目錄下，新建 store 文件夾下建 index.js ：

import { createStore } from "vuex" 
 
// 創(chuàng)建新的 store 實例 
const store = createStore({ 
 state: { 
  name:'前端人' 
 }, 
 getters: { }, 
 mutations: { }, 
 actions: { }, 
 modules: { } 
}) 
 
export default store 

 在 main.js 中將 store 實例作為插件安裝。

import { createApp } from 'vue' 
import App from './App.vue' 
import router from "./router/index" 
import store from "./store/index" 
 
createApp(App).use(router).use(store).mount('#app') 

4.2、獲取狀態(tài)信息

在 App.js 文件內(nèi)，使用狀態(tài)信息，這與 vuex3 使用方式相同。

<template> 
 獲取 state 內(nèi)的狀態(tài)信息 
 {{ this.$store.state }} 
 獲取 getters 內(nèi)的屬性 
 {{ this.$store.getters.getName }} 
</template> 

五、vuex 結(jié)合 composition API

在 組合式 API 中使用 store 時，需要使用 useStore 把 store 引入組件，然后才能操作。

<script> 
import { useStore } from 'vuex' 
export default { 
 setup() { 
  const store = useStore() 
  console.log('store', store.state.name) 
 }, 
} 
</script> 

useStore 使用之前，需要先引入，然后調(diào)用。

5.1、操作 vuex 狀態(tài)信息

vuex 中同步操作數(shù)據(jù)是由 commit 調(diào)用 mutations 內(nèi)的方法，異步操作是 dispatch 調(diào)用 actions 內(nèi)的方法。

示例1：mutations 內(nèi)方法修改 name 的值。

// 在 index.js 內(nèi) 
mutations: { 
 changeName(state,data) { 
   //data 是傳入要修改的值 
  state.name = data 
 } 
} 
 
//App.vue 內(nèi) 
<script> 
import { useStore } from 'vuex' 
export default { 
 setup() { 
  const store = useStore() 
  console.log('store', store.state.name) 
  store.commit('changeName', '我是前端人') 
  console.log('store', store.state.name) 
 } 
} 
</script> 

 示例1：actions 內(nèi)方法修改 name 的值。

actions 內(nèi)的方法是沒有辦法直接操作 state 的狀態(tài)信息，只有 mutations 內(nèi)的方法才可以，所以需要調(diào)用 mutations 的方法，實現(xiàn)修改 。

index.js 代碼

import { createStore } from "vuex" 
 
const store = createStore({ 
 state: { 
  name:'前端人' 
 }, 
 getters: { 
  getName(state) { 
   return state.name 
  } 
 }, 
 mutations: { 
  changeName(state,data) { 
   state.name = data 
  } 
 }, 
 actions: { 
  changeVal(state) { 
    // 借用setTimeout 模擬異步操作 
   setTimeout(() => { 
    state.commit('changeName','我是前端人') 
   },2000) 
  } 
 }, 
 modules:{} 
}) 
export default store 

App.vue 代碼

<script> 
import { useStore } from 'vuex' 
export default { 
 setup() { 
  const store = useStore() 
  store.dispatch('changeVal') 
 } 
} 
</script> 
<template> 
 {{ this.$store.state.name }} 
 {{ this.$store.getters.getName }} 
</template>