Vue3.2 setup文法糖、Composition API歸納總結

Vue3.2 setup文法糖、Composition API歸納總結

起初 Vue3.0 暴露變量必須 return 出來，template中才能使用。

Vue3.2 中 隻需要在 script 标簽上加上 setup 屬性，元件在編譯的過程中代碼運作的上下文是在 setup() 函數中，無需return，template可直接使用。

一、檔案結構

<template>
  // Vue2中，template标簽中隻能有一個根元素，在Vue3中沒有此限制
  // ...
</template>

<script setup>
  // ...
</script>

<style lang="scss" scoped>
  // 支援CSS變量注入v-bind(color)
</style>

           

二、data

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

  // ref聲明響應式資料，用于聲明基本資料類型
  const name = ref('Jerry')
  // 修改
  name.value = 'Tom'

  // reactive聲明響應式資料，用于聲明引用資料類型
  const state = reactive({
    name: 'Jerry',
    sex: '男'
  })
  // 修改
  state.name = 'Tom'
  
  // 使用toRefs解構
  const {name, sex} = toRefs(state)
  // template可直接使用{{name}}、{{sex}}
</script>

           

三、method

<template>
  // 調用方法
  <button @click='changeName'>按鈕</button>  
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    name: 'Jery'
  })

  // 聲明method方法
  const changeName = () => {
    state.name = 'Tom'
  }  
</script>

           

四、computed

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

  const count = ref(1)

  // 通過computed獲得doubleCount
  const doubleCount = computed(() => {
    return count.value * 2
  })
</script>

           

五、watch

<script setup>
  import { watch, reactive } from 'vue'

  const state = reactive({
    count: 1
  })

  // 聲明方法
  const changeCount = () => {
    state.count = state.count * 2
  }

  // 監聽count
  watch(
    () => state.count,
    (newVal, oldVal) => {
      console.log(state.count)
      console.log(`watch監聽變化前的資料：${oldVal}`)
      console.log(`watch監聽變化後的資料：${newVal}`)
    },
    {
      immediate: true, // 立即執行
      deep: true // 深度監聽
    }
  )
</script>

           

六、props父傳子

子元件

<template>
  <span>{{props.name}}</span>
  // 可省略【props.】
  <span>{{name}}</span>
</template>

<script setup>
  // import { defineProps } from 'vue'
  // defineProps在<script setup>中自動可用，無需導入
  // 需在.eslintrc.js檔案中【globals】下配置【defineProps: true】

  // 聲明props
  const props = defineProps({
    name: {
      type: String,
      default: ''
    }
  })  
</script>

           

父元件

<template>
  <child name='Jerry'/>  
</template>

<script setup>
  // 引入子元件(元件自動注冊)
  import child from './child.vue'
</script>

           

七、emit子傳父

子元件

<template>
  <span>{{props.name}}</span>
  // 可省略【props.】
  <span>{{name}}</span>
  <button @click='changeName'>更名</button>
</template>

<script setup>
  // import { defineEmits, defineProps } from 'vue'
  // defineEmits和defineProps在<script setup>中自動可用，無需導入
  // 需在.eslintrc.js檔案中【globals】下配置【defineEmits: true】、【defineProps: true】
	
  // 聲明props
  const props = defineProps({
    name: {
      type: String,
      default: ''
    }
  }) 
  // 聲明事件
  const emit = defineEmits(['updateName'])
  
  const changeName = () => {
    // 執行
    emit('updateName', 'Tom')
  }
</script>

           

父元件

<template>
  <child :name='state.name' @updateName='updateName'/>  
</template>

<script setup>
  import { reactive } from 'vue'
  // 引入子元件
  import child from './child.vue'

  const state = reactive({
    name: 'Jerry'
  })
  
  // 接收子元件觸發的方法
  const updateName = (name) => {
    state.name = name
  }
</script>

           

八、v-model

子元件

<template>
  <span @click="changeInfo">我叫{{ modelValue }}，今年{{ age }}歲</span>
</template>

<script setup>
  // import { defineEmits, defineProps } from 'vue'
  // defineEmits和defineProps在<script setup>中自動可用，無需導入
  // 需在.eslintrc.js檔案中【globals】下配置【defineEmits: true】、【defineProps: true】

  defineProps({
    modelValue: String,
    age: Number
  })

  const emit = defineEmits(['update:modelValue', 'update:age'])
  const changeInfo = () => {
    // 觸發父元件值更新
    emit('update:modelValue', 'Tom')
    emit('update:age', 30)
  }
</script>

           

父元件

<template>
  // v-model:modelValue簡寫為v-model
  // 可綁定多個v-model
  <child
    v-model="state.name"
    v-model:age="state.age"
  />
</template>

<script setup>
  import { reactive } from 'vue'
  // 引入子元件
  import child from './child.vue'

  const state = reactive({
    name: 'Jerry',
    age: 20
  })
</script>

           

九、nextTick

<script setup>
  import { nextTick } from 'vue'
	
  nextTick(() => {
    // ...
  })
</script>

           

十、子元件ref變量和defineExpose

子元件

<template>
  <span>{{state.name}}</span>
</template>

<script setup>
  import { reactive, toRefs } from 'vue'
  // defineExpose無需引入
  // import { defineExpose, reactive, toRefs } from 'vue'

  // 聲明state
  const state = reactive({
    name: 'Jerry'
  }) 
	
  // 将方法、變量暴露給父元件使用，父元件才可通過ref API拿到子元件暴露的資料
  defineExpose({
    // 解構state
    ...toRefs(state),
    // 聲明方法
    changeName () {
      state.name = 'Tom'
    }
  })
</script>

           

父元件

<template>
  <child ref='childRef'/>  
</template>

<script setup>
  import { ref, nextTick } from 'vue'
  // 引入子元件
  import child from './child.vue'

  // 子元件ref
  const childRef = ref('childRef')
  
  // nextTick
  nextTick(() => {
    // 擷取子元件name
    console.log(childRef.value.name)
    // 執行子元件方法
    childRef.value.changeName()
  })
</script>

           

十一、插槽slot

子元件

<template>
  // 匿名插槽
  <slot/>
  // 具名插槽
  <slot name='title'/>
  // 作用域插槽
  <slot name="footer" :scope="state" />
</template>

<script setup>
  import { useSlots, reactive } from 'vue'
  const state = reactive({
    name: '前端國小生',
    age: '27歲'
  })
  
  const slots = useSlots()
  // 匿名插槽使用情況
  const defaultSlot = reactive(slots.default && slots.default().length)
  console.log(defaultSlot) // 1
  // 具名插槽使用情況
  const titleSlot = reactive(slots.title && slots.title().length)
  console.log(titleSlot) // 3
</script>

           

父元件

<template>
  <child>
    // 匿名插槽
    <span>我是預設插槽</span>
    // 具名插槽
    <template #title>
      <h1>我是具名插槽</h1>
      <h1>我是具名插槽</h1>
      <h1>我是具名插槽</h1>
    </template>
    // 作用域插槽
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年齡{{ scope.age }}</footer>
    </template>
  </child> 
</template>

<script setup>
  // 引入子元件
  import child from './child.vue'
</script>

           

十二、路由useRoute和useRouter

<script setup>
  import { useRoute, useRouter } from 'vue-router'
	
  // 必須先聲明調用
  const route = useRoute()
  const router = useRouter()
	
  // 路由資訊
  console.log(route.query)

  // 路由跳轉
  router.push('/newPage')
</script>

           

十三、路由導航守衛

<script setup>
  import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
	
  // 添加一個導航守衛，在目前元件将要離開時觸發。
  onBeforeRouteLeave((to, from, next) => {
    next()
  })

  // 添加一個導航守衛，在目前元件更新時觸發。
  // 在目前路由改變，但是該元件被複用時調用。
  onBeforeRouteUpdate((to, from, next) => {
    next()
  })
</script>

           

十四、store

Vue3 中的Vuex不再提供輔助函數寫法

<script setup>
  import { useStore } from 'vuex'
  import { key } from '../store/index'

  // 必須先聲明調用
  const store = useStore(key)
	
  // 擷取Vuex的state
  store.state.xxx

  // 觸發mutations的方法
  store.commit('fnName')

  // 觸發actions的方法
  store.dispatch('fnName')

  // 擷取Getters
  store.getters.xxx
</script>

           

十五、生命周期

通過在生命周期鈎子前面加上 “on” 來通路元件的生命周期鈎子。

下表包含如何在 Option API 和 setup() 内部調用生命周期鈎子。

Option API	setup中
beforeCreate	不需要
created	不需要
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

十六、CSS變量注入

<template>
  <span>Jerry</span>  
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    color: 'red'
  })
</script>
  
<style scoped>
  span {
    // 使用v-bind綁定state中的變量
    color: v-bind('state.color');
  }  
</style>

           

十七、原型綁定與元件内使用

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

// 擷取原型
const prototype = app.config.globalProperties

// 綁定參數
prototype.name = 'Jerry'

           

元件内使用

<script setup>
  import { getCurrentInstance } from 'vue'

  // 擷取原型
  const { proxy } = getCurrentInstance()
  
  // 輸出
  console.log(proxy.name)
</script>

           

十八、對 await 的支援

不必再配合 async 就可以直接使用 await 了，這種情況下，元件的 setup 會自動變成 async setup 。

<script setup>
  const post = await fetch('/api').then(() => {})
</script>

           

十九、定義元件的name

用單獨的<script>塊來定義

<script>
  export default {
    name: 'ComponentName',
  }
</script>

           

二十、provide和inject

父元件

<template>
  <child/>
</template>

<script setup>
  import { provide } from 'vue'
  import { ref, watch } from 'vue'
  // 引入子元件
  import child from './child.vue'

  let name = ref('Jerry')
  // 聲明provide
  provide('provideState', {
    name,
    changeName: () => {
      name.value = 'Tom'
    }
  })

  // 監聽name改變
  watch(name, () => {
    console.log(`name變成了${name}`)
    setTimeout(() => {
      console.log(name.value) // Tom
    }, 1000)
  })
</script>

           

子元件

<script setup>
  import { inject } from 'vue'
	// 注入
  const provideState = inject('provideState')
  
  // 子元件觸發name改變
  provideState.changeName()
</script>

           

二十一、Vue3中使用echarts

// 安裝
cnpm i echarts --save

// 元件内引入
import * as echarts from 'echarts'