vue3基础+进阶（二、vue3常用组合式api基本使用）

**Vue3基础+进阶**

### 二、Vue3常用组合式API基本使用####1. setup函数在 Vue3 中，`setup` 函数是组合式 API 的入口。它会被自动调用一次，在组件渲染之前执行。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ message }}</div>
</template>

<script>
export default {
 setup() {
 const message = 'Hello, World!';
 return { message };
 },
};
</script>

在上面的例子中，我们定义了一个 `message` 变量，并将其暴露给模板使用。

####2. ref函数`ref` 函数用于创建响应式引用。它可以用来存储基本类型的数据（如数字、字符串等）。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
 setup() {
 const count = ref(0);
 return { count };
 },
};
</script>

在上面的例子中，我们使用 `ref` 函数创建了一个响应式的 `count` 变量。

####3. reactive函数`reactive` 函数用于创建响应式对象。它可以用来存储复杂类型的数据（如对象等）。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ person.name }}</div>
</template>

<script>
import { reactive } from 'vue';

export default {
 setup() {
 const person = reactive({
 name: 'John Doe',
 age:30,
 });
 return { person };
 },
};
</script>

在上面的例子中，我们使用 `reactive` 函数创建了一个响应式的 `person` 对象。

####4. computed函数`computed` 函数用于创建计算属性。它可以用来根据其他数据计算出新的值。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ doubleCount }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
 setup() {
 const count = ref(0);
 const doubleCount = computed(() => count.value *2);
 return { count, doubleCount };
 },
};
</script>

在上面的例子中，我们使用 `computed` 函数创建了一个计算属性 `doubleCount`，它根据 `count` 变量的值进行计算。

####5. watch函数`watch` 函数用于监视数据变化。它可以用来响应数据的变化。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ count }}</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
 setup() {
 const count = ref(0);
 watch(() => count.value, (newCount) => {
 console.log(`Count changed to ${newCount}`);
 });
 return { count };
 },
};
</script>

在上面的例子中，我们使用 `watch` 函数监视了 `count` 变量的变化，并响应了数据的变化。

####6. watchEffect函数`watchEffect` 函数用于监视数据变化并执行副作用。它可以用来响应数据的变化。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ count }}</div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
 setup() {
 const count = ref(0);
 watchEffect(() => {
 console.log(`Count is ${count.value}`);
 });
 return { count };
 },
};
</script>

在上面的例子中，我们使用 `watchEffect` 函数监视了 `count` 变量的变化，并执行了副作用。

####7. onMounted函数`onMounted` 函数用于在组件挂载后执行回调函数。它可以用来响应组件的挂载。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
 setup() {
 const message = ref('');
 onMounted(() => {
 console.log('Component mounted');
 });
 return { message };
 },
};
</script>

在上面的例子中，我们使用 `onMounted` 函数在组件挂载后执行了回调函数。

####8. onUnmounted函数`onUnmounted` 函数用于在组件卸载前执行回调函数。它可以用来响应组件的卸载。

javascript// src/components/HelloWorld.vue<template>
 <div>{{ message }}</div>
</template>

<script>
import { ref, onUnmounted } from 'vue';

export default {
 setup() {
 const message = ref('');
 onUnmounted(() => {
 console.log('Component unmounted');
 });
 return { message };
 },
};
</script>

在上面的例子中，我们使用 `onUnmounted` 函数在组件卸载前执行了回调函数。

以上就是 Vue3 常用组合式 API 的基本使用。这些 API 可以帮助你更好地管理组件的状态和行为。