快捷導(dǎo)航

簡(jiǎn)單聊聊vue3.0 sfc中setup的變化

更新時(shí)間：2021年10月09日 09:08:22 作者：new_cheng

這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

在vue中，sfc(單文件組件)指的是文件后綴名為.vue的特殊文件格式，它允許將 Vue 組件中的模板、邏輯與樣式封裝在單個(gè)文件中。

以下是一個(gè)基本的sfc

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

vue3.0在最新的sfc提案中推出了setup的寫(xiě)法，下面讓我們來(lái)看看，新的提案都有哪些變化。

標(biāo)準(zhǔn)的sfc寫(xiě)法

在使用TS的情況下，標(biāo)準(zhǔn)的sfc需要借助defineComponent來(lái)進(jìn)行類型推斷。

<script lang="ts">
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    setup() {
      return {
        // 暴露給template的屬性
      }
    }
  })
</script>

script-setup

script setup的推出，目的是為了讓開(kāi)發(fā)者更高效率的開(kāi)發(fā)組件，減少樣板內(nèi)容，減輕開(kāi)發(fā)負(fù)擔(dān)。僅僅需要給script標(biāo)簽添加一個(gè)setup屬性，就能將script變成setup函數(shù)，同時(shí)定義的變量，函數(shù)，導(dǎo)入的組件都會(huì)默認(rèn)暴露給模板。

變量暴露

標(biāo)準(zhǔn)的寫(xiě)法

<script>
import { defineComponent, ref} from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    return {
      count
    }
  }
})
</script>

<template>
  <div>
    parent{{count}}
  </div>
</template>

setup 寫(xiě)法

<script setup lang="ts">
import {ref} from 'vue'
  
const count = ref(0)
</script>

<template>
  <div>
    parent{{count}}
  </div>
</template>

組件掛載

標(biāo)準(zhǔn)的寫(xiě)法

<script lang="ts">
import { defineComponent } from 'vue'
import child from './childComponent'

export default defineComponent({
  components: {
    child
  },
  setup() {
    // ...
  }
})
</script>

<template>
  <div>
    parent
    <child />
  </div>
</template>

setup 寫(xiě)法

<script setup lang="ts">
import child from './childComponent'
</script>

<template>
  <div>
    parent
    <child />
  </div>
</template>

無(wú)需再手動(dòng)掛載組件，即可在模板中使用，高效快捷。其他的變量，以及頂級(jí)API，比如compute、watch等屬性，和原來(lái)的標(biāo)準(zhǔn)寫(xiě)法一樣。

props

在setup中，子組件在接收props時(shí)，需要借助defineProps，這是一個(gè)只能在setup語(yǔ)法中才能使用的API。我們先來(lái)看看標(biāo)準(zhǔn)的寫(xiě)法，props是如何接收的。

標(biāo)準(zhǔn)寫(xiě)法

// parent.vue
<template>
  <child :count={count} />
</template>
<script lang="ts">
impor {defineComponent,ref} from 'vue'
import child from './childComponent'

export default defineComponent({
  components: {
    child
  },
  setup() {
    const count = ref(0)
    return {
      count
    }
  }
})
</script>

// child.vue
<template>
  child{{count}}
</template>
<script lang="ts">
impor {defineComponent} from 'vue'
export default defineComponent({
  props: ['count'],
  setup(props) {
    return {}
  }
})
</script>

setup 寫(xiě)法，使用defineProps

// parent.vue
<template>
  <child :count={count} />
</template>
<script setup lang="ts">
impor {ref} from 'vue'
import child from './childComponent'
  
const count = ref<number>(0)
</script>

// child.vue
<template>
  child{{count}}
</template>
<script setup>
defineProps(['count'])
</script>

❝
注意：使用sfc-setup語(yǔ)法，不需要引入defineProps
❞

在這里我們只需要簡(jiǎn)單的聲明props，寫(xiě)法簡(jiǎn)潔了不少。

❝
那如何給props做類型檢查呢？
❞

<script setup>
defineProps({
  count: Number,
  title: {
    type: String,
    default: 'header'
  },
  data: {
    type: Object,
    defualt () {
      return {}
    }
  }
})
</script>

❝
如何使用TS進(jìn)行類型注解呢？
❞

<script lang="ts" setup>
interface d {
  name: string  
}
  
defineProps<{
  count: number // Number要換成ts的語(yǔ)法
  title: string
  data: d
}>()
</script>

❝
我們發(fā)現(xiàn)，props沒(méi)有被賦予默認(rèn)值，在TS的寫(xiě)法中，給props設(shè)置默認(rèn)值有2種方式
❞

ES6的變量解構(gòu)賦值

defineProps返回一個(gè)對(duì)象，我們可以在解構(gòu)返回的對(duì)象，同時(shí)賦予默認(rèn)值。

<script lang="ts" setup>
interface d {
  name: string  
}
  
const {count = 0, title = 'header', date = { name: 'a' }} = defineProps<{
  count: number // Number要換成ts的語(yǔ)法
  title: string
  data: d
}>()
</script>

withDefaults

❝
官方后續(xù)推出了withDefaults來(lái)給props提供默認(rèn)值；withDefaults會(huì)對(duì)默認(rèn)值進(jìn)行類型檢查。
❞

<script lang="ts">
// 別忘記了引入 withDefaults
impor { withDefaults } from 'vue'
  
interface d {
  name: string  
}
  
const props = withDefaults(defineProps<{
  count: number // Number要換成ts的語(yǔ)法
  title: string
  data: d
}>(), {
  count: 0,
  title: 'header',
  data: () => ({name: '王小二'})
})
</script>

自定義事件

要在setup中，使用事件，需要借助defineEmits，這也是是一個(gè)僅能在sfc-setup語(yǔ)法中使用的編譯器宏。

<script setup lang="ts">
  // 定義事件，同時(shí)做類型注解
  // 非TS寫(xiě)法：const emits = defineEmits(['create'])
  const emits = defineEmits<{
    (e: 'create', value: string): void
  }>()
  
  // 觸發(fā)事件
  const addTodo = () => {
    emits('create', 'hi')
 }
</script>

補(bǔ)充一個(gè)用Vue3 + ts 重構(gòu)的官方TodoMVC例子：codesandbox.io/s/vibrant-w…