如何實(shí)現(xiàn)高質(zhì)量音樂Web app

本篇內(nèi)容介紹了“如何實(shí)現(xiàn)高質(zhì)量音樂Web app”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

3.0對比一2.0的區(qū)別：
1.Performance //性能
2.Tree-shaking support //通過分析，可以使你代碼里沒有使用的代碼全部刪除，簡單粗暴點(diǎn)就是代碼優(yōu)化工具，想了解自行百度
3.Composition API //特色語法
4.Fragment, Teleport, Suspense //“碎片”，Teleport即Protal傳送門，“懸念”
5.Better TypeScript support //TypeScript支持度
6.Custom Renderer API //自定義rende

了解了大概的新內(nèi)容，就讓我們直接來搭建個(gè)項(xiàng)目看看吧！

先初始化一個(gè)vue2.0項(xiàng)目
1、安裝vue-cli：

npm install -g @vue/cli
可以輸入vue -V查看版本

vue -V
現(xiàn)在安裝下來的話是@vue/cli 4.3.1版本
2、初始化 vue 項(xiàng)目：

vue create 你的項(xiàng)目名稱
確認(rèn)后:我們選擇Manually select feature手動(dòng)

Please pick a preset: 
  default (babel, eslint)  //自動(dòng)
? Manually select features  //手動(dòng)
隨后勾選我們開發(fā)常用的：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ? Babel
 ? TypeScript
 ? Progressive Web App (PWA) Support
 ? Router
 ? Vuex
 ? CSS Pre-processors
?? Linter / Formatter
 ? Unit Testing
 ? E2E Testing
剩下就是vue-cli起步的步驟了：如果不知道可以參考文章:(https://www.jianshu.com/p/ae3fc27eb2c2)
為什么要說到vue-cli起步項(xiàng)目是因?yàn)関ue3.0必須是從vue2.0升級而來，過程為了不再手動(dòng)安裝Router 和 Vuex，所以在過程中就要勾選這兩個(gè)

升級到vue3.0
升級3.0需要通過插件的形式來升級，在項(xiàng)目里的命令行輸入

vue add vue-next
然后就會(huì)自動(dòng)安裝(vue-cli-plugin-vue-next) 插件：
 

插件操作內(nèi)容

然后理論嗶嗶和項(xiàng)目升級完了咱就來玩玩，體驗(yàn)下吧！
 

vue3.0的新特性體驗(yàn)
我們先來在/src/views下創(chuàng)建一個(gè)test.vue文件

<template>
  <div class="test">
      <div>vue3.0體驗(yàn)</div>
  </div>
</template>

<script>
 export default {
 }
</script>
<style lang="less" scoped>
.test {
  color: #999;
}
</style>
然后在router里面加入路由

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router
2.0版本的Router 與 3.0 版本變化不大，只是之前采用構(gòu)造函數(shù)的方式，
這里改為使用 createRouter 來創(chuàng)建 Vue Router 實(shí)例，使用方法一樣
配置完成我們在 App.vue 中給Test.vue 的頁面一個(gè)入口：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/about">About</router-link> | 
      <router-link to="/test">Test</router-link> | 
    </div>
    <router-view/>
  </div>
</template>
然后運(yùn)行即可

npm run serve
狀態(tài)和事件綁定
在vue3.0里的定義狀態(tài)不在是data()里面了，而是通過 setup 方法去定義狀態(tài)，然后通過return把狀態(tài)拋出去。
然后定義狀態(tài)需要通過調(diào)用ref去定義，我們先來在test.vue里寫個(gè)簡單的累加器試試

<template>
  <div class="test">
　　   <h2>vue3.0</h2>
      <div>{{count}}</div>
      <div>{{hhhh}}</div>
      <button @click="add">add</button>
      <button @click="theNot">---</button>
  </div>
</template>

<script>
import { ref , } from 'vue'
 export default {
    setup () {
      const hhhh = ref(false)
      const count = ref(0)
      const add = () => {
        count.value++
      }
      const theNot= () => {
        hhhh.value = !hhhh.value
      } 
      return {
        count,
        hhhh,
        theNot,
        add
      }
    },
 }
</script>
很明顯，3.0的方法和事件都不用再寫在methods中。而是全部都在setup方法中里面聲明，但我也試了一下以前的data定義狀態(tài)個(gè)methods寫事件還是可以兼容的。
然后補(bǔ)充一個(gè)定義狀態(tài)的的方式就是reactive，這個(gè)和ref同樣是定義狀態(tài)的，只不過寫法不一樣而已，通過一個(gè)案例來了解下吧。

<template>
  <div class="ref">
      <h3>{{count}}</h3>
      <h3>{{pos.countA}}</h3>
      <h3>{{pos.countB}}</h3>
      <button @click="add">+++</button>
      <div>
        <button @click="subtraction">---</button>
      </div>
  </div>
</template>

<script>
import {reactive,ref} from 'vue'
 export default {
    //ref修改數(shù)據(jù)需要使用這樣count.value=xxx的形式，而reactive只需要state.reactiveField=值這樣來使用
    setup() {
        const pos  = reactive({ countA: 0,countB: 100 }) //refreactive
        const count = ref("單個(gè)")  //ref只能監(jiān)聽一些如數(shù)字、字符串、布爾之類的簡單數(shù)據(jù)
        const add = () => { 
            pos.countA++;
        }
        const subtraction = () => {
            pos.countB-=2;
        }
        return { 
            count,
            pos,
            add,
            subtraction
        }
    },
 }
</script>
通過案例可以看出來，ref是定義單個(gè)狀態(tài)，而reactive可以通過對象來定義多個(gè)狀態(tài)，而ref改變數(shù)據(jù)需要（狀態(tài)).value=xxx，reactive則可以通過state.reactiveField=值來操作。

計(jì)算屬性和監(jiān)聽器
然后再說說vue3.0的computed 和 watch 方法：

<template>
  <div class="test">
      <div>{{count}}</div>
      <button @click="add">add</button>
      <div>count * 2 = {{doubleCount}}</div>
  </div>
</template>

<script>
import { ref , computed, watch } from 'vue'
 export default {
    setup () 
      const count = ref(0)
      const add = () => {
        count.value++
      }
      //第一個(gè)參數(shù)是監(jiān)聽的值，count.value 表示當(dāng) count.value 發(fā)生變化就會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)，即第二個(gè)參數(shù)可以執(zhí)行監(jiān)聽時(shí)候的回調(diào)
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      //計(jì)算屬性 computed 是一個(gè)方法，里面需要包含一個(gè)回調(diào)函數(shù)，當(dāng)我們訪問計(jì)算屬性返回結(jié)果時(shí)，會(huì)自動(dòng)獲取回調(diào)函數(shù)的值：
      return {
        count,
        doubleCount,
        add
      }
    },
 }
</script>
獲取路由
3.0 中通過 getCurrentInstance 方法獲取當(dāng)前組件的實(shí)例，然后通過 ctx 屬性獲得當(dāng)前上下文，
ctx.$router 是 Vue Router 實(shí)例，里面包含了 currentRoute 可以獲取到當(dāng)前的路由信息

<script>
  import { getCurrentInstance } from 'vue'
  export default {
    setup () {
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
    }
  }
</script>
Vuex 集成

<template>
  <div class="test">
      <div>{{count}}</div>
      <button @click="add">add</button>
      <div>state from vuex {{a}}</div>
      <button @click="take">take a</button>
  </div>
</template>

<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
 export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      const { ctx } = getCurrentInstance()
      const a = computed(() => ctx.$store.state.test.a)
      //通過getCurrentInstance()方法獲取實(shí)例，從而
      const take= () => {
        ctx.$store.commit('setTestA', count)
      }
      //Vuex 狀態(tài)仍然使用 commit 方法，
      return {
        count,
        add,
        take,
        a
      }
    },
 }
</script>
vuex的操作其實(shí)和2.0是沒太大差別的，只不過3.0的實(shí)例獲取得通過getCurrentInstance()方法

總結(jié)時(shí)間
1、vue3.0是通過 createRouter 來創(chuàng)建 Vue Router 實(shí)例。
2、vue3.0定義狀態(tài)和事件、計(jì)算屬性都是寫在setup里，以前數(shù)據(jù)狀態(tài)都寫在data里，事件寫在methods中，但是測試以前的寫法還是兼容。
3、3.0的狀態(tài)定義要通過ref和reactive來定義，兩者區(qū)別只在于寫法不一樣。
4、vuex的操作操作和定義屬性和2.0無區(qū)別，但實(shí)例獲取要通過getCurrentInstance()方法來獲取

“如何實(shí)現(xiàn)高質(zhì)量音樂Web app”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！