setup 函数
在 Vue 3 的组件中，可以使用 setup 函数来配置组件。setup 函数会在组件创建之前执行，它返回一个对象，这个对象中的属性和方法将会被暴露给组件的模板。
import { ref, reactive } from 'vue';
export default {
setup() {
// 定义响应式变量
const count = ref(0);
// 定义响应式对象
const state = reactive({
message: 'Hello, Vue 3!',
});
// 返回需要暴露给模板的数据和方法
return {
count,
state,
increment() {
count.value++;
},
};
},
};
响应式数据
在 setup 函数中，使用 ref 来创建响应式变量，使用 reactive 来创建响应式对象。ref 用于基本数据类型，而 reactive 用于对象。
暴露给模板的数据和方法
在 setup 函数中定义的数据和方法将会被暴露给组件的模板。这样，你可以在模板中直接使用它们。
生命周期钩子
Vue 3 的生命周期钩子函数（如 onMounted、onUpdated、onUnmounted）可以直接在 setup 函数中使用，而不需要再使用 methods 或 mounted 这样的选项。
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
// 在组件挂载后执行的生命周期钩子
onMounted(() => {
console.log('组件已挂载');
});
return {
count,
};
},
};
计算属性和监听器
使用 computed 和 watch 函数创建计算属性和监听器。
import { ref, computed, watch } from 'vue';
export default {
setup() {
const count = ref(0);
// 计算属性
const doubledCount = computed(() => count.value * 2);
// 监听器
watch(count, (newVal, oldVal) => {
console.log(`count 发生变化，新值：${newVal}，旧值：${oldVal}`);
});
return {
count,
doubledCount,
};
},
};
这些是 Vue 3 组合式 API 的基本用法。它使得组件的逻辑更加清晰，更容易复用和测试。在 Vant3 中，你可以利用这些特性来构建更加灵活和强大的移动端应用。如果需要更多详细信息，建议查阅 Vue 3 的官方文档和 Vant3 的官方文档。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5778/Vant