Vue3.0初體驗 - 新功能以及相關庫使用

前言

vue3.0從發佈到如今已經有幾個月了，基本上你們都處於一個試玩階段。但搬磚的廠裏有了新項目，領導提出新項目用vue3.0 + ts踩坑的想法，那麼vue3.0到底怎麼玩，最近也稍微搞了下，下面快速和鐵汁們分享一波基礎的使用。

看完文章，你會學習到：

1. vue3的使用安裝
2. vue3的新特性
3. vuex，vue-router的升級和使用

老樣子，下面咱們直接開衝！

體驗Vue3的方式

• vue-cli

官方指定cli工具，要更新最新版本。這個比較穩定，建議剛開始使用這個

// 新版vue-cli會多出一個建立vue3的項目、選擇vue3以後、其餘的配置就看你們們的喜愛了
  npm install -g @vue/cli
  vue create vue3-project
  cd vue3-project
  vue add vue-next
  npm run serve

• webpack

這個是vue-cli還沒開始支持時候，vue官網本身搞得一套webpack項目配置，直接clone

git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
  cd 01-vue3-webpack
  npm install 
  npm run dev

• vite

這個就比較有意思了，這個是尤大大最近着重開發的一個工具，意在替代webpack打包，核心是利用瀏覽器如今已經支持import，遇到import會使用http請求去加載文件，在vite中使用koa攔截這些請求，進行分類以及預編譯，加載各個模塊，在build時候使用rollup進行打包，節省了大部分時間，實現複雜項目秒開

npm install -g create-vite-app
  create-vite-app vue3-vite
  cd vue3-vite
  npm install
  npm run dev

ps: 鐵汁們在使用的時候注意本身的node版本，使用vite時候須要高版本的node。

Vue3新特性

• Composition API體驗

包含setup、ref、computed等。因爲reactive，compiler-sfc, complier-dom等核心模塊的抽離，能夠更加自由的在項目中引用使用，使函數式編程能夠發揮更大的做用

setup

Vue3.0的重要新函數，熟悉React的同窗們確定常常用Hooks，其實我我的感受這個和Hooks其實很像，固然我也不清楚尤大大是否是借鑑的React(/手動狗頭)，不過函數式編程確定是爽的。

setup是個獨立的函數，內部可使用Vue的全部模塊，包括了生命週期、響應式、computed、watch等，最後返回一個對象，能夠在template中直接調用。

reactive、ref

看名字就知道是vue的三大件之一響應式的模塊，此次作了很大革新，使用了proxy代替之前的defineprototype，性能上提高不少，支持了Array的監聽，而且單獨抽離了出來。
使用方式是傳入一個對象，返回一個proxy代理監聽過的對象，代理過的數據都是響應式的。

computed、watch
此次computed和watch都拆分紅了獨立的模塊，在使用的時候按需引入進來使用方式也有了丟丟改變

好了，說了那麼多，光說不練假把式，咱們寫個🌰來看看：

<template>
  <div>
    <p>count: {{state.count}}</p>
    <p>doubleCount: {{doubleCount}}</p>
    <p>number: {{number}}</p>
    <div><button @click="add">add</button></div>
  </div>
</template>
<script>
    import { reactive, computed, ref } from 'vue'

    export default {
      name: 'App',
      setup () {
        const state = reactive({
          count: 1
        })

        const number = ref(0)

        const doubleCount = computed(() => state.count * 2)

        function add () {
          state.count++
          number.value += 10
        }

        return { state, doubleCount, add, number }
      }
    }
</script>

• Fragment

這個我我的認爲仍是很爽的，支持多根節點，不用特地在外面故意套一層無用DOM，雖然一些糾錯工具依然會標紅就是了....

<template>
  <h3>體驗一把Fragment</h3>
  <h3>能夠有多個根節點</h3>
</template>

<script>
    ...
</script>

• Teleport

這個和react的傳送門的概念差很少，也是建立一個DOM插入到根節點。

<template>
  <div>
    <h3>類react傳送門Teleport</h3>
    <p><button @click="isOpen = !isOpen">打開/關閉彈窗</button></p>
    <Teleport to="#app">
      <div v-if="isOpen">一個彈窗!!!!!!</div>
    </Teleport>
  </div>
</template>

<script>
import { reactive, computed, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    const isOpen = ref(false)
    return { isOpen }
  }
}
</script>

Vue3配套的庫

雖然上面說了Vue3的新特性，我們開發項目確定不能只用框架使勁懟，還得讓配套的庫跟上纔好用，下面介紹下vuex和vue-router的使用。

• 一鍵升級vuex和vue-router

vue add vue-next

• vue-router 4.x 單獨安裝&使用

  • 安裝方式

  npm install vue-router@next

  • 使用方式

  // route.js
  // route註冊
  import { createRouter, createWebHistory } from 'vue-router'
  
  const routes = [
    // ...這裏老樣子
  ]
  
  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
  })
  
  export default router
  
  // Page頁面
  // template中使用 組件相同 Link Router-view組件
  <template>
      <link to="xxx" />
      <router-view /></router-view>
  </template>
  
  // script中方法調用
  
  <script>
      import { useRouter } from 'vue-router'
      
      export default {
        name: 'App',
        setup () {
          const router = useRouter()
          router.push({path: '', query: {}})
          // ...
        }
      }
  </script>

• vuex 4.x 單獨安裝&使用

  • 安裝方式

  npm install vuex@next

  • 使用方式

  // store.js
     // vuex註冊
    import { createStore } from 'vuex'
  
    export default createStore({
      state: {
          userName: 'xiaoming'
      },
      mutations: {},
      actions: {},
      getters: {},
      modules: {}
    })
      
    // Page頁面
    // 獲取store
    <script>
      import { useStore } from 'vuex'
      
      export default {
        name: 'App',
        setup () {
          store = userStore()
          
          const userName = store.state.userName
          // ...
        }
      }
    </script>

• vue和相關庫在main文件中註冊使用

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index.js'
import store from './store/index.js'

const app = createApp(App)

// 註冊路由
app.use(router)

// 註冊vuex
app.use(store)

// ps: 相關的install，必定要在mount以前註冊

app.mount('#app')

寫在最後

正文到這裏差很少就結束了。說句題外話，vue3.x對於vue2.x來講更新的仍是蠻多的，除了咱們已經說爛了的響應式重寫，靜態屬性提高優化，diff最長遞增子序列等等，寫法上也有了很大不一樣。我我的仍是蠻喜歡函數式編程的寫法，兄弟萌能夠在平時無聊的時候玩一玩。

emmmmmm，雖然element-ui已經基本不更新了，更別說適配vue3。組件庫說實話，確實是個問題，不過這個以後確定也是會解決的。

此次分享到這裏就結束了，以爲有用的兄弟萌能夠點個贊。文中有不對的地方，也但願大佬們幫我指出改正，hhhh。