vue3 setup写不写到标签上的区别

在vue3种setup的写法，可以单独写setup()也可以写到script标签中，当然我们推荐后面这种

他的好处有很多，代码也简洁很多。

1、属性和方法无需return，可直接使用

/*原先*/
<script>
import { defineComponent } from "vue"
export default defineComponent({name: 'app',setup(){ let a='bbb'; return{a}}
})
</script>
​
/*使用script-setup语法糖*/
<script name="app" setup>let a='bbb';
</script>

2、import组件自动注册，无需写到components中

/*原先*/
<template>
<about />
</template>
<script>
import about from './about.vue'
import { defineComponent } from "vue"
export default defineComponent({
name: 'home',
components: { about }setup(){}
})
</script>
​
/*用script-setup语法糖后*/
<template>
<about />
</template>
<script>
<script setup>
import about from './about.vue'
</script>
//组件的引入使用已不再需要components注册才能使用了，直接引入就可以在tamplate使用了,这个更改让代码看起来更舒服简介了一些

3、组件使用的变化，props用法defineProps

//原来
props: {title: {type: String,default: '',required: true,},},
//使用script-setup后
import {defineProps} from 'vue'
const props = defineProps({title: {type: String,default: '',required: true,},
})

4.emit用法变化defineEmits

//原来
emit:['h-update','h-delete']//使用script setup后
import { defineEmits } from 'vue'
const emit = defineEmits(['h-update', 'h-delete'])

5.attrs和slot用法变化

//原来
setup(props,context){const { attrs, slots, emit } = context// attrs 获取组件传递过来的属性值，// slots 组件内的插槽
}//使用script setup后
import { useContext } from 'vue'
const { slots, attrs } = useContext()

6.组件对外暴露属性defineExpose

//子组件
<template>{{msg}}
</template>
<script setup>
import { ref } from 'vue'
let msg = ref("Child Components");
// defineExpose无需导入，直接使用
defineExpose({msg
});
</script>
//父组件
<template><Child ref="child" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from './components/Child.vue'
let child = ref(null);
onMounted(() => {console.log(child.value.msg); // Child Components
})
</script>

7.使用自定义指令

全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。

但这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用

<script setup>
const vMyDirective = {beforeMount: (el) => {// 在元素上做些操作}
}
</script>
<template><h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>// 导入的指令同样能够工作，并且能够通过重命名来使其符合命名规范import { myDirective as vMyDirective } from './MyDirective.js'
</script>

导入指令：

<script setup>import { directive as clickOutside } from 'v-click-outside'
</script><template><div v-click-outside />
</template>