Composition API(vue3) 和Options API（vue2）区别

options API

• 由于所有数据都挂载在 this 之上，因而 Options API 的写法对 TypeScript 的类型推导很不友好，并且这样也不好做 Tree-shaking 清理代码。
• 增功能基本都得修改 data、method 等配置，并且代码上 300 行之后，会经常上下反复横跳，开发很痛苦。
• 代码不好复用，Vue 2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突的问题。

Composition API

• 所有 API 都是 import 引入的，没用到功能，打包的时候会被清理掉 ，减小包的大小。
• 不再上下反复横跳，我们可以把一个功能模块的 methods、data 都放在一起书写，维护更轻松。
• 可以更好的组织代码结构、利用业务逻辑代码复用，更好的维护
• computed ref 声明周期靠单独引入，而不是依赖上下文（onMouted、onUnmounted）生命周期
• Composition API 对我们开发 Vue 项目起到了巨大的帮助。下面这个示例图很好地说明了问题：每一个功能模块的代码颜色一样，左边是 Options API，一个功能的代码零散的分布在 data，methods 等配置内，维护起来很麻烦，而右边的 Compositon API 就不一样了，每个功能模块都在一起维护。

script setup 是为了提高使用compostion API而存在的

Composition API 拆分代码

为什么要拆分代码? 如果在一个页面里有这两个功能，那就需要在 data 和 methods 里分别进行配置。但这样的话，数据和方法相关的代码会写在一起，在组件代码行数多了以后就不好维护。所以，我们需要使用 Composition API 的逻辑来拆分代码，把一个功能相关的数据和方法都维护在一起。
但是，所有功能代码都写在一起的话，也会带来一些问题：随着功能越来越复杂，script 内部的代码也会越来越多。因此，我们可以进一步对代码进行拆分，把功能独立的模块封装成一个独立的函数，真正做到按需拆分。

在下面我们在uitils中新建一个todoList.js

import { ref, computed } from "vue";
function useTodos() {
  let title = ref("");
  let todos = ref([{ title: "学习Vue3", done: false }]);
  function addTodo() {
    todos.value.push({
      title: title.value,
      done: false,
    });
    title.value = "";
  }
  function clear() {
    //把done为true的过滤掉
    todos.value = todos.value.filter((v) => !v.done);
  }
  let active = computed(() => {
    return todos.value.filter((v) => !v.done).length;
  });
  let all = computed(() => todos.value.length);
  let allDone = computed({
    get: function () {
      return active.value === 0;
    },
    set: function (value) {
      todos.value.forEach((todo) => {
        todo.done = value;
      });
    },
  });

  function delTodo(idx){
    todos.value.splice(idx,1)
  }
  return { title, todos, addTodo, clear,delTodo, active, all, allDone };
 }
export {
  useTodos
}

这个函数就是把那些和清单相关的所有数据和方法，都放在函数内部定义并且返回，这样这个函数就可以放在任意的地方来维护。

而我们的组件入口，也就是 script setup 中的代码，就可以变得非常简单和清爽了。在下面的代码中，我们只需要调用 useTodos，并且获取所需要的变量即可，直接在模板中使用即可，具体的实现逻辑可以去 useTodos 内部维护，代码可维护性大大增强。

<script setup>
	import {useTodos} from '../utils/todoList'
	import {useAdd} from '../utils/tiredAdd'
	let { title, todos:todoList, addTodo, clear,delTodo, active, all, allDone } = useTodos();
</script>

响应式style 样式的特性

在 style 标签上，当我们加上 scoped 这个属性的时候，我们定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。

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

这样，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。

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

style 标签的特殊属性，通过标记 scoped 可以让样式只在当前的组件内部生效，还可以通过 v-bind 函数来使用 JavaScript 中的变量去渲染样式，如果这个变量是响应式数据，就可以很方便地实现样式的切换。

<template>
  <div>
    <h1 @click="add">{{ count }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"
}
</script>

<style scoped>
h1 {
  color:v-bind(color);
}
</style>>