在 Vue 3.2 及以上版本hooks的使用方法介绍
dearweb 发布:2023-11-10 12:34:34阅读:在 Vue 3.2 及以上版本,使用 Composition API 时,你可以使用一组称为 "Hooks" 的函数来组织组件逻辑。以下是一些常见的 Vue 3.2 Hooks:
ref:用于创建响应式数据。
import { ref } from 'vue'; const count = ref(0);
reactive:用于创建响应式对象。
javascriptCopy code import { reactive } from 'vue'; const state = reactive({ message: 'Hello, Vue 3.2!', count: 0 });
toRefs:将响应式对象转换为响应式引用。
import { reactive, toRefs } from 'vue'; const state = reactive({ message: 'Hello, Vue 3.2!', count: 0 }); const { message, count } = toRefs(state); computed:创建计算属性。 javascriptCopy code import { ref, computed } from 'vue'; const count = ref(0); const squared = computed(() => count.value * count.value);
watch:用于监视数据变化。
import { ref, watch } from 'vue'; const count = ref(0); watch(count, (newValue, oldValue) => { console.log(`count changed from ${oldValue} to ${newValue}`); });
onMounted、onUpdated、onUnmounted:分别在组件被挂载、更新和卸载时执行的生命周期钩子。
import { onMounted, onUpdated, onUnmounted } from 'vue'; onMounted(() => { console.log('Component mounted'); }); onUpdated(() => { console.log('Component updated'); }); onUnmounted(() => { console.log('Component unmounted'); });
这只是 Composition API 的一小部分,你可以根据需要使用其他 Hook 函数。这些 Hook 函数使得组织组件逻辑更加灵活和直观。详细的文档可以在 Vue 官方文档中找到:Composition API。
小礼物走一波,支持作者
赏还没有人赞赏,支持一波吧