簡單聊聊vue3.0 sfc中setup的變化

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

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

前言

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

以下是一個基本的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的寫法，下面讓我們來看看，新的提案都有哪些變化。

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

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

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

script-setup

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

變量暴露

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

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

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

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

setup 寫法

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

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

組件掛載

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

<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 寫法

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

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

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

props

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

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

// 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 寫法，使用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語法，不需要引入defineProps
❞

在這里我們只需要簡單的聲明props，寫法簡潔了不少。

❝
那如何給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的語法
  title: string
  data: d
}>()
</script>

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

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

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

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

withDefaults

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

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

自定義事件

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

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

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