钩子函数
Composition API
中的生命周期钩子函数 => Options API
钩子前面加上 on
下面这些生命周期钩子函数,都应该在组件的 setup() 阶段被同步调用
Eg.
onMounted 钩子
可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
typescript
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册
- 通常
onMounted
的调用必须放在setup()
或<script setup>
内的词法上下文中。 - onMounted() 也可以在一个外部函数中调用,只要调用栈是同步的,且最终起源自 setup() 就可以。不推荐!!如下图
typescript
import { onMounted } from 'vue';
function fetchData() {
console.log('执行 fetchData 函数');
}
function myFunction() {
onMounted(() => {
console.log('在 myFunction 中调用 onMounted');
});
}
export default {
setup() {
myFunction();
return {};
}
};
虽然 onMounted() 被调用的位置不在 setup() 函数内部,但它被包裹在了同步调用链中,最终会返回到 setup() 函数
setup函数
setup代替了 Vue 2 中的 data、computed、methods 等选项,在 setup 函数中,可以初始化组件的响应式数据、计算属性、方法等
typescript
import { ref, reactive, computed } from 'vue';
export default {
setup() {
// 初始化响应式数据
const count = ref(0);
const state = reactive({
message: 'Hello'
});
// 计算属性
const doubleCount = computed(() => count.value * 2);
// 方法
function increment() {
count.value++;
}
// 返回暴露给模板的数据和方法
return {
count,
state,
doubleCount,
increment
};
}
};
生命周期钩子
在组合式 API 中,生命周期钩子被视为普通的函数,可以在 setup 函数中调用它们
typescript
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('组件已挂载');
});
onUnmounted(() => {
console.log('组件已卸载');
});
// ...
}
};
模板引用
当我们需要访问底层的DOM元素时,可以使用 ref attribute
typescript
<input ref="input">
typescript
<script setup>
import { ref, onMounted } from 'vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
onMounted(() => {
// 因为是一个ref对象,需要通过.value访问
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
注意: 只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 input,在初次渲染时会是 null。
组件上的ref
typescript
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
// child.value 是 <Child /> 组件的实例
// 父组件对子组件的每一个属性和方法都有完全的访问权
})
</script>
<template>
<Child ref="child" />
</template>