以下是 setup 函数的基本用法和一些常见的模式：
基本用法
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
setup() {
// 设置组件的初始状态
const message = 'Hello, Vue 3!';
// 返回组件所需的属性和方法
return {
message,
increment: () => {
// 点击按钮时修改状态
console.log('Button clicked!');
}
};
}
};
</script>
在这个例子中，setup 函数返回了一个包含 message 和 increment 的对象，这两者都可以在模板中直接使用。
响应式数据
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式数据
const count = ref(0);
// 返回响应式数据
return {
count,
increment: () => {
// 修改响应式数据
count.value++;
}
};
}
};
</script>
ref 用于创建响应式数据，确保当数据发生变化时能够触发组件的重新渲染。
生命周期钩子
<script>
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
// 在组件挂载时执行的逻辑
onMounted(() => {
console.log('Component mounted');
});
// 在组件卸载时执行的逻辑
onUnmounted(() => {
console.log('Component unmounted');
});
}
};
</script>
使用 onMounted 和 onUnmounted 钩子可以在组件的生命周期中执行逻辑。
接收 Props
<script>
export default {
props: ['initialCount'],
setup(props) {
// 接收来自父组件的 Props
console.log('Initial count from parent:', props.initialCount);
// 在 setup 中返回数据，它将成为组件的响应式数据
return {
count: props.initialCount,
increment: () => {
count++;
}
};
}
};
</script>
在 setup 函数的参数中，可以访问到组件的 props，从而获取父组件传递的数据。
注意事项
- 在 setup 函数内部，不能直接使用 this。如果需要访问组件实例，可以通过 getCurrentInstance 函数获取。
- setup 函数是响应式系统的入口点，用于初始化组件的状态，返回的数据将在模板中可用。
setup 函数的强大之处在于它提供了更灵活的组件组织方式，使得状态和逻辑更容易被组合、复用和测试。
转载请注明出处：http://www.zyzy.cn/article/detail/518/Vue 3.0