<script setup> 本质上是以一种更精简的方式来书写 Composition API。
按昨天说的规范： 我们在src/components/新建Todolist.vue
代码语言：javascript复制<template>
<div>
<h1 @click="add">{{count}}</h1>
</div>
</template>
<script setup>
import { ref } from "vue";
let count = ref(1)
function add(){
count.value
}
</script>
<style>
h1 {
color: red;
}
</style>
- template里是html模板
- script里是js， setup是一个标记 代表我们script中代码是script setup语法
- style 里是css 样式。
可以看到 变量count 就是响应式数据，他是用 ref初始化的。 可以在模板中直接使用count。
但是 想要修改count的值，需要 修改count.value 才行。 现在有了这个累加器组件，我们就可以直接import导入使用了。 这样就可以直接复用了。
代码语言：javascript复制<template>
<h1>这是首页</h1>
<TodoList />
</template>
<script setup>
import TodoList from '../components/TodoList.vue'
</script>
Composition API
之所以说Composition API比Option API好维护。 是因为 把每个功能里的 data 和 methods维护在一起。 我理解这样功能多了以后，就不用在data里改完，再翻到methods里的找了。
在使用Composition API拆分功能时，是不依赖this的。
<script setup> 好用的功能
还是用累加器的例子，如果不用<script setup> 需要这样写。
代码语言：javascript复制<script >
import { ref } from "vue";
export default {
setup() {
let count = ref(1)
function add() {
count.value
}
return {
count,
add
}
}
}
</script>
如果想要暴露属性(count和add)， setup函数需要返回一个promise。
使用了<script setup>就可以让代码更精简。 还可以使用顶层的await去请求后端数据。
style 样式特性
如果我们想给当前组件元素加样式，避免和全局样式冲突的时候，可以用 scoped标签。 比如:
代码语言：javascript复制<style scoped>
h1 {
color: red;
}
</style>>
那它是怎么做到的呢？ 标签和样式的属性上，会增加data-的前缀，确保在当前组件生效。
代码语言：javascript复制<h1 data-v-3de47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
color: red;
}
</style>
如果在scoped 里面还想搞全局样式，用:global来标记。 详细流程可以 直接看视频
