网站制作布局,中小企业网站营销,wordpress 4.0 谷歌字体,广州市网站设计生命周期#xff1a;
生命周期钩子主要包括#xff1a; beforeCreate#xff1a;组件实例被创建之前调用。在这个阶段#xff0c;组件的 props 和 data 还未被初始化。created#xff1a;组件实例创建完成后调用。在这个阶段#xff0c;组件的 props 和 data 已经被初始…生命周期
生命周期钩子主要包括 beforeCreate组件实例被创建之前调用。在这个阶段组件的 props 和 data 还未被初始化。created组件实例创建完成后调用。在这个阶段组件的 props 和 data 已经被初始化但 DOM 还未挂载。beforeMount组件的模板编译和虚拟 DOM 已经创建但尚未挂载到真实 DOM 上。mounted组件已经挂载到真实 DOM 上可以访问和操作 DOM 元素。beforeUpdate组件的响应式数据发生变化但尚未重新渲染和更新 DOM。updated组件已经重新渲染和更新 DOM。beforeUnmount组件实例被销毁之前调用。在这个阶段组件仍然完全可用。unmounted组件实例已经被销毁组件的所有功能都已失效。 初始化阶段
setup
这是 vue 3 引入的新生命周期钩子在 beforeCreate 和 created 钩子之前调用。setup 函数接收两个参数props 和 context包含 attrs、slots、emit 等。在 setup 中你可以使用 ref 和 reactive 来创建响应式状态并且可以直接访问组件的 props。
beforeCreate
在组件实例创建之前调用。此时组件的 props 和 data 还未被观察和初始化。在 setup 钩子之后调用。
created
组件实例创建完成后调用。在这个阶段组件的 props 和 data 已经被观察和初始化但 DOM 还未挂载。可以在这里执行一些不需要 DOM 的初始化操作。
挂载阶段
beforeMount
在组件的模板编译和虚拟 DOM 已经创建但尚未挂载到真实 DOM 上之前调用。
mounted
组件已经挂载到真实 DOM 上可以访问和操作 DOM 元素。通常在这里执行一些初始的 DOM 操作或第三方库的初始化。
更新阶段
beforeUpdate
组件的响应式数据发生变化但尚未重新渲染和更新 DOM 之前调用。可以在这里访问组件更新前的状态。
updated
组件已经重新渲染和更新 DOM 之后调用。当需要基于新的 DOM 状态执行操作时可以在这里进行。
卸载阶段
beforeUnmount
组件实例被销毁之前调用。在这个阶段组件仍然完全可用但即将被卸载。可以在这里执行一些清理操作如取消计时器、移除事件监听器等。
unmounted
组件实例已经被销毁组件的所有功能都已失效。在这个阶段无法再访问组件实例或任何其状态。
错误处理
errorCaptured
当组件或其后代组件发生错误时调用。这个钩子可以用于错误处理和报告。 注意事项 在 Vue 3 中beforeDestroy 和 destroyed 钩子已被重命名为 beforeUnmount 和 unmounted。setup 钩子在组件的 beforeCreate 和 created 生命周期钩子之间执行因此它提供了一个更早的时机来设置响应式状态和执行其他初始化逻辑。由于 setup 函数在 beforeCreate 和 created 之前调用因此你不能在 setup 中访问 this因为组件实例尚未创建。 template div p{{ message }}/p button clickchangeMessageChange Message/button /div
/template script setup
import { ref, onMounted, onBeforeUnmount } from vue; const message ref(Hello, Vue 3!);
let count ref(0); function changeMessage() { message.value Message changed ${count.value} times!;
} onMounted(() { console.log(Component mounted!); // 执行一些需要在组件挂载后执行的代码
}); onBeforeUnmount(() { console.log(Component about to be unmounted!); // 执行一些需要在组件卸载前执行的清理操作
});
/script
组件
创建组件
template div pCount: {{ count }}/p button clickincrementIncrement/button /div
/template script setup langts
import { ref } from vue; // 定义一个响应式引用
const count ref(0); // 定义一个方法
function increment() { count.value;
} // 可以直接将变量和方法暴露给模板
// 它们会在模板中自动变得可用
/script style scoped
/* 组件样式 */
/style
响应式数据和方法
name 和 age 是使用 ref 创建的响应式引用它们分别存储用户的姓名和年龄。incrementAge 是一个方法用于增加用户的年龄。
计算属性
title 是一个计算属性它基于 name 的值动态生成标题。
Props
UserProps 是一个 TypeScript 接口定义了组件接受的 props 的类型。defineProps 用于声明组件的 props并根据 UserProps 接口进行类型检查。在 onMounted 生命周期钩子中我们根据传入的 props 初始化 name 和 age 的值。
模板
在模板中我们直接使用了在 script setup 中定义的 title、name、age 和 incrementAge。由于 script setup 的语法这些变量和方法在模板中自动可用。
