Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In VUE, SFC (single-file component) refers to a special file format with a. Vue suffix that allows templates, logic, and styles in vUE components 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>Copy the code

Vue3.0 has introduced setup in the latest SFC proposal. Let’s take a look at the changes in the new proposal.

Standard SFC writing

In the case of TS, standard SFC requires defineComponent for type inference.

<script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup() { return { // }}}) </script>Copy the code

script-setup

Script Setup was introduced to allow developers to develop components more efficiently, reduce boilerplate content, and reduce the development burden. Script is turned into a setup function by simply adding a setup attribute to the script tag, and all defined variables, functions, and imported components are exposed to the template by default.

1. 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>
Copy the code
  • The setup of writing
<script setup lang="ts">
import {ref} from 'vue'
  
const count = ref(0)
</script>

<template>
  <div>
    parent{{count}}
  </div>
</template>
Copy the code

Component mounted

  • 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>
Copy the code
  • The setup of writing
<script setup lang="ts">
import child from './childComponent'
</script>

<template>
  <div>
    parent
    <child />
  </div>
</template>
Copy the code

You do not need to manually mount components, and can use them in templates. Other variables, as well as top-level apis such as compute, watch, and other attributes, are written as standard.

props

In Setup, child components need to use defineProps when receiving props, an API that is only available in setup syntax. Let’s look at the standard notation, how the props accept.

  • The standard of writing
// 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>
Copy the code
// child.vue
<template>
  child{{count}}
</template>
<script lang="ts">
impor {defineComponent} from 'vue'
export default defineComponent({
  props: ['count'],
  setup(props) {
    return {}
  }
})
</script>
Copy the code
  • Setup, using 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>
Copy the code
// child.vue
<template>
  child{{count}}
</template>
<script setup>
defineProps(['count'])
</script>
Copy the code

❝

Note: With the SFC-setup syntax, there is no need to introduce defineProps

❞

Here we just need simple props, which is a lot simpler.

❝

How do I type check the props?

❞

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

❝

How do YOU use TS for type annotations?

❞

<script lang="ts" setup> interface d {name: string} defineProps<{count: number d }>() </script>Copy the code

❝

We found that props was not given a default value. There are two ways to set the default value for props

❞

  • ES6 variable destruct assignment

DefineProps returns an object, and we can deconstruct the returned object and assign the default value.

<script lang="ts" setup> interface d { name: string } const {count = 0, title = 'header', date = { name: 'a'}} = defineProps<{count: number} title: string data: d}>() </script>Copy the code
  • withDefaults

❝

The withDefaults were introduced to give props a default value; WithDefaults does type checking on the defaults.

❞

<script lang="ts"> // Don't forget to introduce withDefaults impor {withDefaults} from 'vue' interface d {name: String} const props = withDefaults(defineProps<{count: number} // number) title: string data: d}>(), {count: 0, the title: 'header' data: (a) = > ({name: 'wang2 xiao3 er4})}) < / script >Copy the code

Custom events

To use events in Setup, use defineEmits, which is also a compiler macro that can only be used in the SFC-Setup syntax.

Const emits = defineEmits(['create']) const emits = defineEmits<{(e: 'create', value: string): void}>() // Trigger event const addTodo = () => {emits('create', 'hi')} </script>Copy the code