Vue3.2 has been issued for some time and has been used for some time, especially the setup syntax is very easy to use, there is a feeling that I can not go back, the following is to share my feelings and experience of this period of time, summary learning, and common progress.

Come down to say the benefits: here steal a lazy, direct copy of the official website

  • Less boilerplate content, cleaner code.
  • You can declare props and throw events using pure Typescript.
  • Better runtime performance (their templates are compiled into renderers of the same scope as them, without any intermediate proxies).
  • Better IDE type inference performance (less work for the language server to extract types from code).

Let’s start with the setup syntax:

1. props

Let’s look at the props statement before 3.2

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

export default defineComponent({
  props: {
    name: {
      type: String.default: ' ',}},setup(props, context) {
    console.log(props, context); }}); </script>Copy the code

3.2

DefineProps and defineEmits are compiler macros that can only be used in 

<script setup>
const props = defineProps({
  name: {
    type: String.default: ' ',}});console.log(props);

const testlick = () = > {
  console.log('test');
};
</script>

Copy the code

So write is not concise a lot, use also more convenient. Let’s look at the compiled file first

The code inside is compiled into the contents of the component setup() function. This means that instead of normal

We can see that the final compilation result is the same syntax as before Vue3.2, which exposes our declared variables, functions, and import imports at the top level, so any bindings at the top level of the

If you get an error using esLint, you can add it in eslint.js

// eslint.js

module.exports = {
  globals: {
    defineEmits: true.defineProps: true,}}Copy the code

2. emit

DefineProps and defineEmits apis must be used in

When using emit, we must declare the event name we use, for example: [‘change’,’update:modelValue’]

Let’s take a look at the code and the compiled code, using the most commonly used bidirectional binding example, to make it clearer.

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: String.default: ' ',}});const emit = defineEmits(['update:modelValue']);
const inputValue = computed({
  get: () = > props.modelValue,
  set: (value) = > emit('update:modelValue', value),
});

</script>
Copy the code

3. The component

Components in 

<template>
  <Test />
</template>

<script setup>
import Test from './index.vue';
</script>

<style lang="scss" scoped>

</style>
Copy the code

If it’s convenient to not have to worry about the component not declaring an error, let’s look at the compiled code

The createBlock method creates a vNode, adds the vNode to the parent component when the component is opened, and removes the node when the component is closed, so that the component can be used directly with the imported label name. Interested can go to the source code

4. useSlots 和 useAttrs

If you want to get slots and Attrs, you can use these two apis, which are not always used

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>
Copy the code

5. defineExpose

Components that use < Script Setup > are turned off by default, that is, public instances of components retrieved from the template ref or $parent chain do not expose any bindings declared in < Script Setup >.

Vue2 {$ref.}} vue2 {$ref.}} vue2 {$ref.}

Get the instance with getCurrentInstance() and first look at the print before using defineExpose

Let’s print ref and see the print result of VUe3

Look at the use ofdefineExposeAfter an instance of the

Ref gets the effect

As you can see, the $ref method does not get its methods or attributes without exporting.

6. And regular<script>Used together

We sometimes use a separate scritp for other logic such as:

<script>
export default {
  name: 'Test'.inheritAttrs: false.customOptions: {},... } </script>Copy the code

We saw the use of object. assign merge, which takes precedence over

methods and properties.

<script>
const a = 123;
const confirmHandler = () = > {
  console.log(6666)
}
</script>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['change'.'confirm']);

const confirmHandler = () = > {
  emit('confirm', multipleSelection.value);
};

const search = ref(' ');
const changeHandle = () = > {
  const list = { page: currentPage.value };
  if (search.value) list.search = search.value;
  emit('change', list);
};

defineExpose({
  changeHandle,
  confirmHandler
})
</script>
Copy the code