Vue3学习笔记 Composition API和script setup 新搭档的好处是？

<script setup> 本质上是以一种更精简的方式来书写 Composition API。

按昨天说的规范： 我们在src/components/新建Todolist.vue

<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导入使用了。 这样就可以直接复用了。

<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> 需要这样写。

<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标签。 比如:

<style scoped>
h1 {
  color: red;
}
</style>>

那它是怎么做到的呢？ 标签和样式的属性上，会增加data-的前缀，确保在当前组件生效。

<h1 data-v-3de47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
    color: red;
}
</style>

如果在scoped 里面还想搞全局样式，用:global来标记。 详细流程可以 直接看视频