<script setup></script> is compile-time syntactic sugar for using the composition API in a single file component (SFC). This syntax is the default recommendation when using SFC with the composition API. Compared with the ordinary <script></script> syntax, it has more advantages:

• Less boilerplate content and more concise code.

• Ability to declare props and custom events using pure TypeScript.

• Better runtime performance (its template will be compiled into a rendering function in the same scope, avoiding the need for rendering context proxy objects).

• Better IDE type inference performance (less work for the language server to extract types from the code).

The above is the description of <script setup> from the vue3 official website. In fact, <script setup> is a syntax sugar for the setup function.

1. Basic syntax

How to write the setup function

<script>
import { ref } from &#39;vue&#39;
export default {
  setup () {
    const num = ref(1);
    return { num }
  }
}
</script>

The variables and functions defined in the setup function need to be returned, otherwise they cannot be used normally.

How to write syntax sugar in <script setup>

<script setup>
    import { ref } from &#39;vue&#39;
    const num = ref(1)
</script>

Variables and functions defined in syntax sugar in <script setup> do not need to be returned. The code inside will be compiled into the content of the component setup() function. This means that unlike ordinary <script> which is only executed once when the component is first introduced, the code in <script setup> will be executed every time a component instance is created. time to execute.

2. Differences in using external files

setup function

<template>
  <div>
    <h3 id="nbsp-test-name"> {{test(name)}}</h3>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import { test } from &#39;@/utils/test.js&#39;
export default {
  setup () {
    const name = ref(&#39;huang&#39;)
    const testName = test 
    return { name, testName }
  }
}
</script>

setup function When using external files, it needs to be defined as a method in the setup function to use it normally.

＜script setup＞Syntax sugar

<template>
  <div>
    <h3 id="nbsp-test-name-nbsp">{{ test(name) }}</h3>
  </div>
</template>
<script setup>
import { test } from &#39;@/utils/test.js&#39;
import { ref } from &#39;vue&#39;
const name = ref(&#39;huang&#39;)
</script>

There is no need to define it as a method in <script setup> syntax sugar and can be used directly.

3. Register component

setup function

<script>
import Hello from &#39;@/components/HelloWorld&#39;
export default {
  components: {
    Hello
  }
}
</script>

<script setup>Syntax sugar

<script setup>
import Hello from &#39;@/components/HelloWorld&#39;
</script>

No need to register in component, you can use it directly.

4. Use custom instructions

setup function

<template>
    <h2 id="使用了setup函数">使用了setup函数</h2>
</template>
<script>
export default {
  directives: {
    onceClick: {
      mounted (el, binding, vnode) {
        console.log(el)
      }
    }
  },
}
</script>

<script setup>Syntax sugar

<template>
    <h2 id="使用了script-nbsp-setup">使用了script setup</h2>
</template>
<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
  }
}
</script>

Globally registered custom instructions will work normally. Local custom instructions do not need to be explicitly registered in <script setup>, but they must follow the naming convention of vNameOfDirective

<Com :num="100"></Com>

Copy after login

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 1
    }
  },
  setup (props) {
    console.log(props)
  }
}
</script>

Copy after login

<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  num: {
    type: Number,
    default: 1
  }
})
</script>

Copy after login

<script>
export default {
  setup (props, context) {
    const sendNum = () => {
      context.emit(&#39;sendNum&#39;, 200)
    }
    return { sendNum }
  }
}
</script>

Copy after login

<script setup>
import { defineProps, defineEmits } from &#39;vue&#39;
const emit = defineEmits([&#39;submit&#39;])
const sendNum = () => {
  emit(&#39;submit&#39;, 1000)
}
</script>

Copy after login

setup function is enabled by default, and all instance variables and methods defined in the function will be exposed. Components using <script setup> are closed by default - that is, the public instance of the component obtained through template reference or $parent chain will not expose any # Binding declared in ##<script setup>. You can use the

compiler macro to explicitly specify the properties to be exposed in the <script setup> component. If you do not use defineExpose The currently referenced component instance variables and methods cannot be obtained. Used

<script setup>
import { ref } from "vue";
const type = ref("<script setup>语法糖");
const msg = ref("使用了defineExpose");
defineExpose({
  type,
  msg,
});
</script>

Not used

<script setup>
import { ref } from "vue";
const type = ref("<script setup>语法糖");
const msg = ref("使用了defineExpose");
</script>

8. Use with ordinary <script>

You can use the regular

tag at the same time. In certain cases of need, a regular <script> may be used to declare options that cannot be declared in a <script setup>, such as inheritAttrs or custom options for plugins . <script><script setup>

Declare named exports of the module.

• 运行只需要在模块作用域执行一次的副作用，或是创建单例对象

<script>
// 普通 <script>, 在模块作用域下执行 (仅一次)
runSideEffectOnce()
// 声明额外的选项
export default {
  name:&#39;header&#39;,
  inheritAttrs: false,
  customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

九、顶层的 await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

<script setup>
const post = await fetch(&#39;https://api.com&#39;).then((r) => r.json())
</script>

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

 十、限制<script setup> 使用src属性

由于模块执行语义的差异，<script setup></script> 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因此，<script setup></script> 不能和 src attribute 一起使用。

The above is the detailed content of What is the difference between and setup function in vue3. For more information, please follow other related articles on the PHP Chinese website!