本文目錄：

• 1.特性函數(shù)setup
• 2.Ref 語法
• 3.Reactive 函數(shù)
• 4.Vue3 生命周期
• 5.偵測變化 - watch
• 6.Vue3的模塊化開發(fā)
• 7.彈窗類組件優(yōu)化：Teleport
• 8.異步組件優(yōu)化：Suspense
• 9.全局API優(yōu)化

1.特性函數(shù)setup

1露该、setup函數(shù)是處于 生命周期函數(shù) beforeCreate 和 Created 兩個鉤子函數(shù)之間的函數(shù) 也就說在 setup函數(shù)中是無法 使用 data 和 methods 中的數(shù)據(jù)和方法的
2、setup函數(shù)是 Composition API（組合API）的入口
3、在setup函數(shù)中定義的變量和方法最后都是需要 return 出去的 不然無法再模板中使用

setup第一個參數(shù)props會自動推論成props里面定義的類型
第二個參數(shù)context合冀，在setup中無法直接訪問vue2最常用的this對象进苍，context提供了vue2中最常用的三個屬性
context.attrs
context.slots
context.emit

2.Ref 語法

ref 是一個函數(shù)，它接受一個參數(shù)，返回的就是一個神奇的 響應(yīng)式對象 叔壤。我們初始化的這個 0 作為參數(shù)包裹到這個對象中去鼻忠，在未來可以檢測到改變并作出對應(yīng)的相應(yīng)涵但。

<template>
  <h1>{{count}}</h1>
  <h1>{{double}}</h1>
  <button @click="increase">+1</button>
</template>
import { ref } from "vue"
setup() {
  const count = ref(0)
  const double = computed(() => {
    return count.value * 2
  })
  const increase = () => {
    count.value++
  }
  return {
    count,
    increase,
    double
  }
}

3.Reactive 函數(shù)

reactive的用法與ref的用法相似杈绸，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時UI也會自動更新矮瘟。不同的是ref用于基本數(shù)據(jù)類型瞳脓，而reactive是用于復(fù)雜數(shù)據(jù)類型，比如對象和數(shù)組

import { ref, computed, reactive, toRefs } from 'vue'

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

setup() {
  const data: DataProps  = reactive({
    count: 0,
    increase: () => { data.count++},
    double: computed(() => data.count * 2)
  })
  const refData = toRefs(data)
  return {
    ...refData
  }
}

使用 ref 還是 reactive 可以選擇這樣的準(zhǔn)則
第一澈侠，就像剛才的原生 javascript 的代碼一樣劫侧，像你平常寫普通的 js 代碼選擇原始類型和對象類型一樣來選擇是使用 ref 還是 reactive。
第二哨啃，所有場景都使用 reactive烧栋，但是要記得使用 toRefs 保證 reactive 對象屬性保持響應(yīng)性。

4.Vue3 生命周期

在vue3中拳球，生命周期在hook中的變化

• beforeCreate -> 不需要
• created -> 不需要
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount -> onBeforeUnmount
• unmounted -> onUnmounted
• errorCaptured -> onErrorCaptured
• renderTracked -> onRenderTracked
• renderTriggered -> onRenderTriggered

為了更好的Tree-shaking审姓，Vue3的生命周期函數(shù)都是從 vue 中導(dǎo)入，再進行直接調(diào)用
從 vue 中引入 多個生命周期函數(shù)

import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, unMounted} from 'vue'
export default {
  name: 'App',
  setup() {
    onBeforeMount(() => {
      // 在掛載前執(zhí)行
    })
    onMounted(() => {
      // 在掛載后執(zhí)行
    })
    onBeforeUpdate(() => {
      // 在更新前前執(zhí)行
    })
    onUpdated(() => {
      // 在更新后執(zhí)行
    })
    onBeforeUnmount(() => {
      // 在組件銷毀前執(zhí)行
    })
    unMounted(() => {
      // 在組件銷毀后執(zhí)行
    })
    return {}
  }
}

onErrorCaptured可以捕捉錯誤祝峻，同時捕捉錯誤需要返回一個布爾值魔吐，表示錯誤是否向上傳播

import { onErrorCaptured } from 'vue'
setup(){
  const error = ref(null)
  onErrorCaptured ((e:any)=>{
    error.value = e
    return true
  })
}

5.偵測變化 - watch

watch的第一個參數(shù)是一個響應(yīng)式的對象，如果要監(jiān)聽多個對象莱找，則第一個參數(shù)也可以是一個數(shù)組
watch 多個值酬姆，返回的也是多個值的數(shù)組

watch([greetings, data], (newValue, oldValue) => {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated' + greetings.value + data.count
})

如果是打算監(jiān)聽data中的一個屬性，比如data.count奥溺，則不能直接去watch([greetings, data.count]這樣寫辞色，而是要使用 getter 的寫法 watch reactive 對象中的一項

watch([greetings, () => data.count], (newValue, oldValue) => {
  console.log('old', oldValue)
  console.log('new', newValue)
  document.title = 'updated' + greetings.value + data.count
})

6.Vue3的模塊化開發(fā)

使用composition API 的好處

• 將相關(guān)的邏輯代碼組合在一起，不要分散在代碼的各個地方

• 可以非常容易的重用代碼浮定，比mixin有更高的靈活度

實踐：記錄鼠標(biāo)的位置
利用vue3進行初步的實現(xiàn)相满，將所有的代碼都寫在setup中

const x = ref(0)
const y = ref(0)
const updateMouse = (e: MouseEvent) => {
  x.value = e.pageX
  y.value = e.pageY
}
onMounted(() => {
  document.addEventListener('click', updateMouse)
})
onUnmounted(() => {
  document.removeEventListener('click', updateMouse)
})

但是上方的代碼還不能做到很方便的重用，所以接下來需要對代碼進行改造桦卒，將組件內(nèi)邏輯抽象成可復(fù)用的函數(shù)
新建一個文件hooks文件夾雳灵，里面就存放我們抽離出來的所有的邏輯模塊，新建一個useMousePosition.ts

import { ref, onMounted, onUnmounted } from 'vue'
function useMouseTracker() {
  // const positions = reactive<MousePostion>({
  //   x: 0,
  //   y: 0
  // })
  const x = ref(0)
  const y = ref(0)
  const updatePosition = (event: MouseEvent) => {
    x.value = event.clientX
    y.value = event.clientY 
  }
  onMounted(() => {
    document.addEventListener('click', updatePosition)
  })
  onUnmounted(() => {
    document.removeEventListener('click', updatePosition)
  })
  return { x, y }
}
export default useMouseTracker

在需要使用這個邏輯的頁面進行引用

import useMousePosition from './hooks/useMousePosition'

這里引用到的就是一段函數(shù)代碼闸盔，然后調(diào)用函數(shù)悯辙，取其返回值就可以了

const { x, y } = useMousePosition()

vue3 這種實現(xiàn)方式的優(yōu)點

• 第一：它可以清楚的知道 xy 這兩個值的來源，這兩個參數(shù)是干什么的迎吵，他們來自 useMouseTracker 的返回躲撰，那么它們就是用來追蹤鼠標(biāo)位置的值。
• 第二：我們可以xy 可以設(shè)置任何別名击费，這樣就避免了命名沖突的風(fēng)險拢蛋。
• 第三：這段邏輯可以脫離組件存在，因為它本來就和組件的實現(xiàn)沒有任何關(guān)系蔫巩，我們不需要添加任何組件實現(xiàn)相應(yīng)的功能谆棱。只有邏輯代碼在里面快压，不需要模版。

將請求接口的邏輯抽離出去：

import { ref } from 'vue'
import axios from 'axios'
// 添加一個參數(shù)作為要使用的 地址
const useURLLoader = (url: string) => {
// 聲明幾個ref垃瞧，代表不同的狀態(tài)和結(jié)果
  const result = ref(null)
  const loading = ref(true)
  const loaded = ref(false)
  const error = ref(null)
// 發(fā)送異步請求蔫劣，獲得data
// 由于 axios 都有定義，所以rawData 可以輕松知道其類型
  axios.get(url).then((rawData) => {
    loading.value = false
    loaded.value = true
    result.value = rawData.data
  }).catch((e) => {
    error.value = e
  })
  // 將這些ref 一一返回
  return {
    result,
    loading,
    error,
    loaded
  }
}
export default useURLLoader

在要使用接口的頁面進行引用：

const { result, loading, loaded } = useURLLoader('https://dog.ceo/api/breeds/image/random')
...
<h1 v-if="loading">Loading!...</h1>
<img v-if="loaded" :src="result.message" >

模塊化結(jié)合typescript - 泛型改造：

function useURLLoader<T>(url: string) {
  const result = ref<T | null>(null)

在應(yīng)用中的使用个从，可以定義不同的數(shù)據(jù)類型

// 在應(yīng)用中的使用脉幢，可以定義不同的數(shù)據(jù)類型
interface DogResult {
  message: string;
  status: string;
}
interface CatResult {
  id: string;
  url: string;
  width: number;
  height: number;
}
const { result, loading, loaded } = useURLLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1')

組件的定義和導(dǎo)出的都是一個普通的object

const component = {
  name: 'HelloWorld',
  props: {
    ...
  }
}

export default component;

而普通的對象在書寫代碼的時候自然不會獲得ts的提示支持，vue3提供了defineComponent來讓普通的object變?yōu)橹С謙s的對象

const component = 
  defineComponent({
    name: 'HelloWorld',
    props: {
      ...
    }
})

export default component;

7.彈窗類組件優(yōu)化：Teleport

Vue2在彈窗組件開發(fā)中嗦锐，Dialog被包裹在其他組件之中嫌松，容易被干擾，樣式也在其他組件中奕污，容易變得非澄幔混亂。
vue3 新添加了一個默認的組件就叫 Teleport碳默，我們可以拿過來直接使用外驱，它上面有一個 to 的屬性，它接受一個css query selector 作為參數(shù)腻窒，這就是代表要把這個組件渲染到哪個 dom 元素中

<template>
  <teleport to="#modal">
    <div id="center">
      <h1>this is a modal</h1>
    </div>
  </teleport>
</template>

特別適合彈窗類的元素渲染，這樣頁面的所有元素就不用所有的元素都擠在一個div中了
在index.html添加一個modal元素

<div id-"app"></div>
<div id-"modal"></div>

實際應(yīng)用中磅崭，在使用彈窗類元素的組件中需要手動控制該元素的渲染與否儿子。
定義一個isOpen來控制，
子組件內(nèi)部通過context.emit('close-modal')去觸發(fā)根組件中定義的事件砸喻，注意在vue3中子組件需要通過emit引入該事件柔逼。

<template>
<teleport to="#modal">
  <div id="center" v-if="isOpen">
    <h2><slot>this is a modal</slot></h2>
    <button @click="buttonClick">Close</button>
  </div>
</teleport>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    isOpen: Boolean,
  },
  emits: {
    'close-modal': null
  },
  setup(props, context) {
    const buttonClick = () => {
      context.emit('close-modal')
    }
    return {
      buttonClick
    }
  }
})

在 App.vue 組件中使用

const modalIsOpen = ref(false)
const openModal = () => {
  modalIsOpen.value = true
}
const onModalClose = () => {
  modalIsOpen.value = false
}

<button @click="openModal">Open Modal</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>

8.異步組件優(yōu)化：Suspense

Suspense是Vue3推出的一個內(nèi)置的特殊組件
Suspense內(nèi)部默認有兩個自定義的slot，剛開始的會渲染#default部分割岛，達到某個條件之后才會去渲染#fallback的內(nèi)容愉适。
如果要使用Suspense，組件中要返回一個Promise
可以非常方便為異步請求的等待界面進行個性化的定制癣漆。
定義一個異步組件维咸，在 setup 返回一個 Promise，AsyncShow.vue

<template>
  <h1>{{result}}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return new Promise((resolve) => {
      setTimeout(() => {
        return resolve({
          result: 42
        })
      }, 3000)
    })
  }
})
</script>

在 App.vue 中使用

<Suspense>
  <template #default>
    <async-show />
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

default可以存放多個異步組件惠爽，這樣會等到所有的異步組件都拿到結(jié)果之后才去渲染里面的內(nèi)容癌蓖。

<template>
  <img :src="result && result.message">
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
  async setup() {
    const rawData = await axios.get('https://dog.ceo/api/breeds/image')
    return {
      result: rawData.data
    }
  }
})
</script>

Suspense 中可以添加多個異步組件

<Suspense>
  <template #default>
    <async-show />
    <dog-show />
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

9.全局API優(yōu)化

vue2全局API的寫法
1.從vue中導(dǎo)出一個全局對象Vue

import Vue from 'vue'
import App from './App.vue'

2.然后在Vue中進行一系列的配置

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

3.新建vue實例，然后調(diào)用$mount方法將其掛在到app節(jié)點上

new Vue({
  render: h => h(App)
}).$mount('#app')

Vue2 這樣寫在一定程度上修改了 Vue 對象的全局狀態(tài)婚肆。
第一租副，在單元測試中，全局配置非常容易污染全局環(huán)境较性，用戶需要在每次 case 之間用僧，保存和恢復(fù)配置结胀。有一些 api （vue use vue mixin）甚至沒有方法恢復(fù)配置，這就讓一些插件的測試非常的困難责循。
第二糟港，在不同的 APP 中，如果想共享一份有不同配置的 vue 對象沼死，也變得非常困難着逐。

vue3新增加了createApp，先將createApp引入意蛀，然后利用createApp生成一個app實例耸别，

const app = createApp(App)

接下來增加配置就不需要直接給Vue添加了，而是給app添加就行了

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

現(xiàn)在再設(shè)置任何的配置都會是在不同的app實例上县钥，不同的設(shè)置就不會發(fā)生沖突秀姐。
當(dāng)配置結(jié)束以后，我們再把 App 使用 mount 方法掛載到固定的 DOM 的節(jié)點上若贮。

app.mount(App, '#app')