vue3中＜script setup＞ 和 setup函数的区别对比

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

<script setup>
    import { ref } from 'vue'
    const num = ref(1)
</script>

<template>
  <div>
    <h2> {{test(name)}}</h2>
  </div>
</template>
<script>
import { ref } from 'vue'
import { test } from '@/utils/test.js'
export default {
  setup () {
    const name = ref('huang')
    const testName = test 
    return { name, testName }
  }
}
</script>

<template>
  <div>
    <h2>{{ test(name) }}</h2>
  </div>
</template>
<script setup>
import { test } from '@/utils/test.js'
import { ref } from 'vue'
const name = ref('huang')
</script>

<script>
import Hello from '@/components/HelloWorld'
export default {
  components: {
    Hello
  }
}
</script>

<script setup>
import Hello from '@/components/HelloWorld'
</script>

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

<template>
    <h1 v-my-Directive>使用了script setup</h1>
</template>
<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
  }
}
</script>

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

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

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

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

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

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

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

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

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