1. setup函数

setup是一个新的组件选项，作为组件中使用组合API的起点。

从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。

这就意味着在setup函数中this 还不是组件实例，this此时是undefined

在模版中需要使用的数据和函数，需要在setup返回。

<template><div class="container"><h1 @click="say()">{{msg}}</h1></div>
</template>
<script>
export default {setup () {console.log('setup执行了')console.log(this)// 定义数据和函数const msg = 'hi vue3'const say = () => {console.log(msg)}return { msg , say}},beforeCreate() {console.log('beforeCreate执行了')console.log(this)}
}
</script>

总结：setup组件初始化之前执行，它返回的数据和函数可在模版使用

Setup  vue 3.2

script setup 语法糖

<script setup></script>

1. 属性和方法无需返回，直接使用

在添加了setup的script标签中，我们不必声明和方法，这种写法会自动将所有顶级变量、函数，均会自动暴露给模板（template）使用 。

<template><div>// 调用方法<button @click='changeName'>name</button>  </div>
</template><script setup>
import { ref} from 'vue'const name= ref('Jerry')// 声明method方法const changeName = () => {name.value = 'Tom'}  
</script>

reactive,computed, 也一样可以使用： 

<template><div>{{msg}}</div><div>{{obj.a}}</div><div>{{sum}}</div>
</template><script setup>
import { ref, reactive, computed } from 'vue'const msg = ref('hello vue3');const obj = reactive({a: 1,b: 2
})const sum = computed(() => {return obj.a + 3;
});
</script>

 2. 组件自动注册

<template><Child />
</template><script setup>
import Child from '@/components/Child.vue'
</script>

2. ref

• 作用：创建一个响应式的引用对象。
• 用法：

import { ref } from 'vue';const count = ref(0);
console.log(count.value); // 访问值
count.value++; // 修改值

3. reactive

• 作用：创建一个响应式的对象。
• 用法：

import { reactive } from 'vue';const state = reactive({count: 0
});
console.log(state.count); // 访问值
state.count++; // 修改值

4. computed

• 作用：创建一个计算属性。
• 用法：

import { computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);
console.log(doubleCount.value); // 0
count.value++;
console.log(doubleCount.value); // 2

5. watch

• 作用：监听响应式数据的变化。
• 用法：

import { watch } from 'vue';const count = ref(0);watch(count, (newVal, oldVal) => {console.log(`count changed from ${oldVal} to ${newVal}`);
});count.value++;

6. watchEffect

• 作用：立即执行传入的函数，并响应式地追踪其依赖，并在其依赖变化时重新运行。
• 用法：

import { watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(count.value);
});count.value++;

7.onMounted、onUpdated、onUnmounted等生命周期钩子

• 作用：在组件的不同生命周期阶段执行特定的逻辑。
• 用法：

import { onMounted, onUnmounted } from 'vue';onMounted(() => {console.log('Component is mounted');
});onUnmounted(() => {console.log('Component is unmounted');
});

8.provide 和 inject

• 作用：在组件树中提供和注入数据。
• 用法：

import { provide, inject } from 'vue';// 提供数据
const app = createApp({setup() {const message = ref('Hello from parent');provide('message', message);}
});// 注入数据
const ChildComponent = {setup() {const message = inject('message');return { message };}
};

9. toRefs

• 作用：将一个响应式对象转换为普通对象，其中每个属性都是一个 ref。
• 用法：

import { reactive, toRefs } from 'vue';const state = reactive({count: 0,name: 'Vue'
});const stateAsRefs = toRefs(state);
console.log(stateAsRefs.count.value); // 0
stateAsRefs.count.value++; // 修改值

10.onBeforeMount、onBeforeUpdate、onBeforeUnmount 等其他生命周期钩子

• 作用：在组件的不同生命周期阶段执行特定的逻辑。
• 用法：

import { onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue';onBeforeMount(() => {console.log('Component is about to be mounted');
});onBeforeUpdate(() => {console.log('Component is about to be updated');
});onBeforeUnmount(() => {console.log('Component is about to be unmounted');
});

这些是 Vue 3 Composition API 的主要组成部分，它们提供了更灵活和强大的方式来组织和重用组件逻辑。通过这些 API，你可以更清晰地管理组件的状态和生命周期。