Vue3中的Setup函数

最新推荐文章于 2025-04-09 15:07:05 发布

爱吃糖的鲸

最新推荐文章于 2025-04-09 15:07:05 发布

阅读量1.2k

点赞数 26

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_51323460/article/details/141158629

版权

干就对了不是：

（一）定义：

Setup是Vue3 的Composition API中的一个函数，它作为组件的入口点，提供了一种新的方式来组织组件的逻辑。setup函数在Vue 3的单文件组件（SFG）中使用，它允许开发者以更加灵活和声明性的方式编写软件。

（二）欸，那它有什么意义嘞：

1、更好的逻辑复用：setup允许开发者将组件逻辑抽离到可复用的组合函数中，而不是混在选项中。

2、更清晰的代码结构：setup使得组件的逻辑更加集中和清洗，特别是对于复杂的组件。

3、更灵活的响应式状态：在setup函数中，可以直接使用Composition API 提供的响应式状态和计算属性等。

4、更好的类型推断：使用TypeScript 时。setup函数可以提供更好的类型推断和自动补全支持。

（三）使用方式：

在vue3的单文件组件中，setup函数位于<script setup> 标签内，它是一个无参数的函数，Vue会调用这个函数并传入几个参数，如props emit 、context等。

setup函数的基本使用示例：

<script setup>
import{ref，onMounted} from 'vue';
//声明响应式状态
const count = ref(0);
//定义计算属性
const doubleCount = computed(()=>coount.value * 2);
//声明周期钩子
onMounted((=>{
    console.log('The component is mounted');
}))
//可以返回一个对象，包含所有需要在模板中使用的响应式状态、计算属性和方法
return{
    count,
    doubleCount
};
</script>
<template>
    <div>{{count}}-{{doubleCount}}</div>
</template>

解释，上面栗子中：

使用了ref来声明一个响应式的状态count.
使用了computed来创建一个计算属性doubleCount，它基于count的值进行计算。
使用了onMounted生命周钩子来在组件挂载后执行一些操作。
return 语句返回了一个包含了所有需要在模板中使用的状态和计算属性的对象

setup 函数还可以使用 defineProps 和 defineEmits 来定义组件的 props 和 emits，使得类型检查和自动补全都更加方便。

<script setup> 语法糖是 Vue 3 的 Composition API 的一部分，它提供了一种更加现代和灵活的方式来构建组件。

（四）使用 `<script setup>` 语法糖来组织更复杂的组件逻辑，你可以遵循以下步骤和实践：

1、导入必要的Composition API函数

首先，导入你需要使用的Compositon API函数，例如ref，reactive,computed，watch等。

import{ ref，reactive,computed,watch,onMounted } from 'vue';

2、使用defineProps和defineEmits

定义组件的props和emits,以确保类型检查和更好的开发体验。

const props = defineProps({myProp:string});

3、声明响应式状态

使用ref或reactive声明组件的响应式状态

const count = ref(0);
const state = reactive({
    firstName:'John',
    lastName:'Doe'
})

4、创建创建计算属性

使用computed创建基于响应式状态的计算属性。

const fullName = computed(() => `${state.firstName} ${state.lastName}`);

5、使用侦听器

使用watch来侦听响应式状态的变化，并执行副作用。

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

6、执行声明周期钩子

使用 onMounted, onUpdated, onUnmounted 等生命周期钩子来执行组件的生命周期逻辑。

onMounted(() => {
  console.log('Component is mounted');
});

7、组织逻辑到自定义组合函数

对于复杂的逻辑，可以创建自定义的组合函数，并将它们导入到 <script setup> 中使用。

// useCounter.js
export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;

  return { count, increment };
}

// 在 <script setup> 中使用
import useCounter from './useCounter.js';

const { count, increment } = useCounter();

8、使用环境变量和全局状态

访问环境变量和全局状态，如vue store 或Pinia store

import { useStore } from 'vuex';

const store = useStore();

9、优化性能

使用onBeforeUpdate或onBeforeUnmount来执行优化相关逻辑。

10、返回模板需要的响应式状态

最后，将所有需要在模板中使用的响应式状态、计算属性、方法等返回。

return {
  count,
  fullName,
  increment
};

示栗组件：

<script setup>
import{ref.reactive,computed.watch,onMounted}from 'vue';
impoet useCounter from './userCounter.js';
import { useStore } from 'vuex';
//响应式引用和状态
const count = ref(0);
const state = reactive({message：'Hello world'});
//计算属性
conts doubleCount = computed(()=>count.value * 2);
//侦听器
watch(count,(newValue, oldValue) => {
    console.log('count changed from ${oldValue} to ${newValue}');

});
//生命周期钩子
onMoundted(()=>{
    console.log('Component is mounted');
});
//自定义组合函数
const{ increment } = userStore();
//Vuex store
const store = useStore();
//返回模板需要的状态和方法
return{
    count,
    doubleCount,
    state,
    increment,
    store.state
};
</scrip>
<template>
<div>
    <p>{{stage.message}}</p>
    <p>Count:{{ count }},Double:{{ doubleCount }}</p>
    <button @clicked = "increment">Increment</button>
</div>

使用 <script setup> 语法糖，你可以将组件逻辑组织得更清晰、更模块化，同时利用 Vue 3 的强大功能。

（五）使用<script setup>与Composition API 时，避免内存泄漏主要涉及正确管理响应式引用、侦听器、定时器、事件监听器等，以下是一些避免内存泄漏的实践哦：

1. 避免不必要的全局变量

全局变量，尤其是那些被赋予了响应式引用的，可能会长时间留在内存中。确保不要在 <script setup> 中创建全局变量。

2. 清理侦听器

使用 watch 或 watchEffect 创建的侦听器，如果没有手动停止，可能会造成内存泄漏。确保在组件卸载时清理这些侦听器。

import { watch, onUnmounted } 
from 'vue'; 
const stopWatch = watch(() => someSource, (newValue, oldValue) => { 
// 当依赖项改变时执行的逻辑 
}); 
onUnmounted(() => { 
    stopWatch(); // 清理侦听器
 });

3. 清理定时器

确保在组件卸载时清除所有使用 setInterval 或 setTimeout 创建的定时器。

let timer = setInterval(() => { // 定时执行的逻辑
 }, 1000); 
onUnmounted(() => { clearInterval(timer); // 清理定时器 });

4. 清理事件监听器

如果你使用了事件监听器，如通过 addEventListener 绑定的，确保在组件卸载时移除它们。

const element = document.getElementById('some-id'); 
element.addEventListener('click', handleClick); 
onUnmounted(() => { element.removeEventListener('click', handleClick); });

5. 使用 `onBeforeUnmount` 和 `onUnmounted` 生命周期钩子

利用这些钩子来执行清理逻辑。

import { onBeforeUnmount, onUnmounted } 
from 'vue'; onBeforeUnmount(() => { // 执行必要的清理操作 }); 
onUnmounted(() => { // 组件卸载后执行的清理操作 });

6. 避免循环引用

在 ref 或 reactive 对象中避免创建循环引用，这可能会导致内存泄漏。

7. 清理组件方法

如果你在模板中使用了组件的方法，而这些方法引用了组件的响应式状态，确保在组件卸载时适当地清理它们。

8. 使用 `unref` 时要小心

unref 函数可以返回一个 ref 对象的内部值，并将其转换为一个普通变量。如果不小心，这可能会导致你失去响应性或忘记清理。

9. 避免长时间运行的副作用

长时间运行的副作用（如无限循环）可能会导致内存泄漏。确保副作用有明确的结束条件。

10. 使用 ESLint 插件

使用 ESLint 插件，如 eslint-plugin-vue，可以帮助你识别和修复可能导致内存泄漏的代码模式。

通过遵循这些实践，你可以在使用 <script setup> 和 Composition API 时减少内存泄漏的风险。

活总是做不完滴~😶‍🌫️