Let's talk briefly about the changes in setup in vue3.0 sfc

Preface
Standard sfc writing method
script-setup

Variable exposure
Component Mounting
props
Custom Events

Summarize

Preface

In Vue, sfc (single file component) refers to a special file format with the file suffix .vue, which allows the template, logic and style in the Vue component to be encapsulated in a single file.

The following is a basic 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 introduced the setup writing method in the latest sfc proposal. Let's take a look at the changes in the new proposal.

Standard sfc writing method

When using TS, the standard sfc needs to use defineComponent to perform type inference.

<script lang="ts">
  import { defineComponent } from 'vue'

    export default defineComponent({
    setup() {
      return {
        // Properties exposed to template }
    }
  })
</script>

script-setup

The purpose of launching script setup is to enable developers to develop components more efficiently, reduce boilerplate content, and lighten the development burden. Just add a setup attribute to the script tag to turn the script into a setup function. At the same time, the defined variables, functions, and imported components will be exposed to the template by default.

Variable exposure

Standard writing

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

Component Mounting

Standard writing

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

No need to manually mount components, you can use them in templates, which is efficient and fast. Other variables and top-level APIs, such as compute and watch, are written the same as the original standard.

props

In setup, when receiving props, subcomponents need to use defineProps, which is an API that can only be used in setup syntax. Let's first look at the standard way of writing and how props are received.

Standard writing

// parent.vue
<template>
  <child :count={count} />
</template>
<script lang="ts">
import {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">
import {defineComponent} from 'vue'
export default defineComponent({
  props: ['count'],
  setup(props) {
    return {}
  }
})
</script>

Setup writing, using defineProps

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

  const count = ref<number>(0)
</script>

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

❝
Note: When using sfc-setup syntax, there is no need to introduce defineProps
❞

Here we just need to simply declare props, which is much simpler to write.

❝
So how do you type check props?
❞

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

❝
How to use TS for type annotation?
❞

<script lang="ts" setup>
interface d {
  name: string
  }

  defineProps<{
  count: number // Number should be replaced with ts syntax title: string
  data:d
}>()
</script>

❝
We found that props are not given a default value. In TS writing, there are two ways to set a default value for props
❞

ES6 variable destructuring assignment

defineProps returns an object, and we can destructure the returned object and assign default values at the same time.

<script lang="ts" setup>
interface d {
  name: string
  }

  const {count = 0, title = 'header', date = { name: 'a' }} = defineProps<{
  count: number // Number should be replaced with ts syntax title: string
  data:d
}>()
</script>

withDefaults

❝
The official later launched withDefaults to provide default values for props; withDefaults will perform type checking on the default values.
❞

<script lang="ts">
// Don't forget to import withDefaults
import { withDefaults } from 'vue'

  interface d {
  name: string
  }

  const props = withDefaults(defineProps<{
  count: number // Number should be replaced with ts syntax title: string
  data:d
}>(), {
  count: 0,
  title: 'header',
  data: () => ({name: '王小二'})
})
</script>

Custom Events

To use events in setup, you need to use defineEmits, which is also a compiler macro that can only be used in sfc-setup syntax.

<script setup lang="ts">
  // Define events and annotate types // Non-TS writing: const emits = defineEmits(['create'])
  const emits = defineEmits<{
    (e: 'create', value: string): void
  }>()

    // trigger event const addTodo = () => {
    emits('create', 'hi')
 }
</script>

Add an official TodoMVC example refactored with Vue3 + ts: codesandbox.io/s/vibrant-w…

Summarize

This is the end of this article about the changes in setup in vue3.0 sfc. For more relevant changes in setup in vue3.0 sfc, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: