东莞企业网站定制设计,移动互联网项目创业融资计划书,做网站asp和asp.net,网络营销成功案例ppt一、生命周期
1、简介
生命周期#xff0c;指的是一个 Vue 实例从创建到销毁的完整阶段#xff0c;强调的是一个时间段。
生命周期钩子函数#xff0c;指的是 Vue 实例提供的内置函数#xff0c;函数的参数为一个回调函数。这些钩子函数会在实例生命周期的某些固定…一、生命周期
1、简介
生命周期指的是一个 Vue 实例从创建到销毁的完整阶段强调的是一个时间段。
生命周期钩子函数指的是 Vue 实例提供的内置函数函数的参数为一个回调函数。这些钩子函数会在实例生命周期的某些固定时间点依次按序执行其内部的回调函数。我们只需要在回调函数内部书写要执行的代码即可。
在调用生命周期钩子函数时Vue会自动将其回调函数注册到当前正在初始化 Vue 组件实例上因此这些钩子函数应当在组件初始化时被同步注册不可以在异步操作中调用这些钩子函数。因为当异步操作开始执行时当前组件实例已经初始化完成调用的钩子函数无法被注册到组件实例上。
当然生命周期钩子函数也可以在一个外部函数中调用只要调用栈是同步的且最终起源自 script setup 就可以。
生周期图示
2、生命周期钩子函数
首先在Vue3的组合式API中并不存在created()和beforeCreate()这两个生命周期钩子函数而是通过setup实现了更灵活的生命周期钩子函数直接书写在script setup模块中的全局代码相当于这两个钩子函数中的代码。
① onBeforeMount()
function onBeforeMount(callback: () void): void 该钩子函数会在组件实例被挂载到页面上之前被调用此时组件中的响应式数据和函数方法等已经设置完成可以在此阶段进行数据初始化计算操作。但此时组件中的DOM节点还没有被创建此时无法操作DOM。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
案例代码
templatedivh1{{ text }}/h1/div
/templatescript setup
// 引入要使用的模块
import { ref, onBeforeMount } from vue// 声明一个响应式变量
let text ref(这是一个大标题)
// 声明一个函数
const changeTest (value) {text.value value
}
// 使用onBeforeMount()钩子函数
onBeforeMount(() {// 调用响应变量console.log(text.value); // 这是一个大标题// 调用函数changeTest(这是修改后的大标题)console.log(text.value); // 这是修改后的大标题// 尝试操作dom console.log(document.querySelector(h1)); // null 此时DOM还未渲染到页面上 无法被获取
})
/script② onMounted()
function onMounted(callback: () void): void 该生命周期钩子函数会在组件实例被挂载到页面上之后被调用此时组件中的DOM结构和其同步子组件中的DOM结构都已经被挂载到页面上了我们可以在此阶段进行 DOM 操作。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
案例代码
// 承接上个案例的代码... // 引入要使用的模块
import { ref, onBeforeMount, onMounted } from vue// 使用onMounted()钩子函数
onMounted(() {// 调用响应变量console.log(text.value); // 这是修改后的大标题// 调用函数changeTest(这是再次修改后的大标题)console.log(text.value); // 这是再次修改后的大标题// 尝试操作dom console.log(document.querySelector(h1)); // 成功获取DOM h1这是再次修改后的大标题/h1
})// 其他...③ onBeforeUpdate()
function onBeforeUpdate(callback: () void): void 该钩子函数会在组件由于响应式状态变更而引起的 DOM 树更新之前调用此时获取DOM节点中的相关状态还是未更新之前的状态获取响应式状态获取的是更新后的状态。我们可以在此阶段根据更新前后的数据状态进行相应操作。
在onMounted()钩子函数中进行会引起DOM更新的响应式状态变更也会触发当前钩子函数在onBeforeMount()中的状态变更则不会因为此时DOM结构还没有渲染到页面上。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
案例代码
templatedivh1{{ text }}/h1button clickchangeTest(点击修改标题)改变标题/button/div
/templatescript setup
// 引入要使用的模块
import { ref, onBeforeUpdate } from vue// 声明一个响应式变量
let text ref(这是一个大标题);// 声明一个函数
const changeTest (value) {text.value value
}// 使用onBeforeUpdate()钩子函数
onBeforeUpdate(() {// 输出变更后的响应式变量值console.log(text.value); // 点击修改标题// 获取 DOM 输出未更新的DOM状态值console.log(document.querySelector(h1).innerText) // 这是一个大标题
})
/script④ onUpdated()
function onUpdated(callback: () void): void 该钩子函数会在组件由于响应式状态变更而引起的 DOM 树更新之后调用。此时获取DOM节点中的相关状态获取的将是更新后的状态。这个钩子会在组件的 DOM 更新后被调用这些更新可能是由不同的响应式状态变更引起的。
不要在该阶段更改组件中的响应式状态这肯有可能会导致无限死循环。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
案例代码
templatedivh1{{ text }}/h1button clickchangeTest(点击修改标题)改变标题/button/div
/templatescript setup
// 引入要使用的模块
import { ref, onUpdated } from vue// 声明一个响应式变量
let text ref(这是一个大标题);// 声明一个函数
const changeTest (value) {text.value value
}// 使用onUpdated()钩子函数
onUpdated(() {// 输出变更后的响应式变量值console.log(text.value); // 点击修改标题// 获取 DOM 输出更新后的DOM状态值console.log(document.querySelector(h1).innerText) // 点击修改标题
})
/script⑤ onBeforeUnmount()
function onBeforeUnmount(callback: () void): void 该钩子函数在组件实例被销毁之前调用此时组件中的所有功能保持可用可以在这一阶段做一些清理工作例如取消订阅、清除定时器、释放资源等。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
案例代码
// 引入要使用的模块
import { onBeforeUnmount } from vue// 使用onBeforeUnmount()钩子函数
onBeforeUnmount(() {// 做一些清理工作释放占用的资源
})⑥ onUnmounted()
function onUnmounted(callback: () void): void 该钩子函数在组件实例被销毁之后调用此时当前组件的所有子组件都已经被卸载且所有响应式状态变量、计算属性、侦听器等都停止作用了。这一阶段也可以做一些清理工作例如取消订阅、清除定时器、释放资源等。但是尽量不要在该阶段进行一些耗时的操作以免影响组件销毁的性能。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
案例代码
// 引入要使用的模块
import { onUnmounted } from vue// 使用onUnmounted()钩子函数
onUnmounted(() {// 做一些清理工作释放占用的资源
})⑦ onActivated()
function onActivated(callback: () void): void 该钩子函数需要与KeepAlive结合使用如果组件是KeepAlive中缓存组件的一部分当组件被插入到DOM中时包括首次挂载和从缓存重新挂载会触发该钩子函数。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
⑧ onDeactivated()
function onDeactivated(callback: () void): void 该钩子函数需要与KeepAlive结合使用如果组件是KeepAlive中缓存组件的一部分当组件从DOM中被移除时包括进入缓存和组件卸载会触发该钩子函数。
该钩子函数在服务端渲染期间不会被调用只会在客户端执行。
⑨ onErrorCaptured()
function onErrorCaptured(callback: ErrorCapturedHook): voidtype ErrorCapturedHook (err: unknown,instance: ComponentPublicInstance | null,info: string
) boolean | void 该钩子函数会在捕获当前组件内的后代组件传递的错误时调用错误源包括组件渲染错误、事件处理器错误、侦听器错误等等。三个实参分别表示错误对象、触发该错误的组件实例以及一个说明错误来源类型的信息字符串。
如果组件的继承链或组件链上存在多个 errorCaptured 钩子函数对于同一个错误这些钩子会被按从底至上的顺序一一向上传递并调用errorCaptured 钩子函数。
默认情况下所有的错误都会被一层层向上传递最终到达全局应用级的 app.config.errorHandler (前提是这个函数已经定义)如果我们在当前钩子函数中return false;则会阻止错误向上传递app.config.errorHandler 也无法监听到。
⑩ onRenderTracked()
function onRenderTracked(callback: DebuggerHook): voidtype DebuggerHook (e: DebuggerEvent) voidtype DebuggerEvent {effect: ReactiveEffecttarget: objecttype: TrackOpTypes /* get | has | iterate */key: any
} 该钩子函数会在当前组件的组件模板渲染过程中追踪到响应式依赖时调用。且仅在开发模式下可用在服务器端渲染期间不会被调用。
⑪ onRenderTriggered()
function onRenderTriggered(callback: DebuggerHook): voidtype DebuggerHook (e: DebuggerEvent) voidtype DebuggerEvent {effect: ReactiveEffecttarget: objecttype: TriggerOpTypes /* set | add | delete | clear */key: anynewValue?: anyoldValue?: anyoldTarget?: Mapany, any | Setany
} 该钩子函数会在当前组件内响应式依赖发生变更并触发了组件渲染时调用。且仅在开发模式下可用在服务器端渲染期间不会被调用。
⑫ onServerPrefetch()
function onServerPrefetch(callback: () Promiseany): void 该钩子函数只会在当前组件示例在服务器上被渲染之前调用。
3、父子组件的生命周期钩子函数执行顺序
组件挂载阶段
在父组件和子组件同事挂载到页面上时会按照以下顺序执行挂载阶段的钩子函数
父组件的script setup相当于created()和beforeCreate()。父组件的onBeforeMount()钩子函数。子组件的script setup相当于created()和beforeCreate()。子组件的onBeforeMount()钩子函数。子组件的onMounted()钩子函数。父组件的onMounted()钩子函数。
组件更新阶段
只有当父子组件同时发生更新时两者的更新阶段钩子函数才会都被触发。如果单独只在父组件内发生更新或只在子组件内发生更新则只会触发相应组件内的更新钩子函数。
父组件的onBeforeUpdate()钩子函数。子组件的onBeforeUpdate()钩子函数。父组件的onUpdated()钩子函数。子组件的onUpdated()钩子函数。
组件销毁阶段
当父组件被销毁时其内部的子组件也会一并被销毁并按照以下顺序执行销毁阶段的钩子函数。
父组件的onBeforeUnmount()钩子函数。子组件的onBeforeUnmount()钩子函数。子组件的onUnmounted()钩子函数。父组件的onUnmounted()钩子函数。
二、模板引用
1、简介
模板引用是Vue提供给我们用来操作DOM的一种方法通过为DOM元素设置一个ref attribute属性并设置属性值为一个响应式变量从而获取对该DOM元素的引用。然后就可以对获取的DOM进行操作例如获取焦点、改变样式等等。
模板引用可以获取对普通DOM元素的引用也可以获取对组件实例的引用。但只有当目标DOM渲染到页面上后才可以通过响应式变量来获取该DOM的引用并对其进行操作。
2、普通DOM的引用
想要获取一个普通DOM的引用首先需要声明一个响应式变量然后将该变量的名字设置为目标DOM的ref 属性的属性值即可最终就可以通过响应式变量来访问对应的DOM。
案例代码
templatediv!-- 给DOM元素增加一个ref属性 属性值与响应式变量名相同 --h1 refh1DOM这是一个普通DOM/h1/div
/templatescript setup
import { ref, onBeforeMount, onMounted, watchEffect } from vue;
// 声明一个响应式变量 变量名与模板中的ref属性值相同
const h1DOM ref(null);watchEffect(() {console.log(监听h1DOM属性值的变化----,h1DOM.value); // 初始为null 之后为对应DOM对象
})onBeforeMount(() {// onBeforeMount阶段DOM还未挂载所以获取不到DOMconsole.log(beforeMount中获取模板引用----,h1DOM.value); // null
})onMounted(() {// onMounted阶段DOM已经挂载可以获取到DOMconsole.log(onMounted中获取模板引用----,h1DOM.value); // 相应DOM
})
/script3、v-for列表渲染DOM的引用
v3.2.25 版本新增可以通过模板引用获取使用v-for进行列表渲染的DOM元素获取结果为一个数组包含列表渲染出来的所有元素但是并不保证获取的元素数组的顺序与页面上元素的顺序相同。
同样首先需要声明一个响应式变量然后将该变量的名字设置为目标DOM的ref 属性的属性值即可。
案例代码
templatediv!-- 给DOM元素增加一个ref属性 属性值与响应式变量名相同 --div v-foritem in 5 refdomList{{ item }}/div/div
/templatescript setup
import { ref, onMounted } from vue;
// 声明一个响应式变量 变量名与模板中的ref属性值相同
const domList ref(null);onMounted(() {// onMounted阶段DOM已经挂载可以获取到DOMconsole.log(onMounted中获取模板引用----,domList.value); // 列表渲染的所有DOM// 遍历domList中的所有DOMdomList.value.forEach((item) {console.log(item); // DOM})
})
/script4、模板引用函数
除了给DOM的ref属性赋值一个响应式变量之外还可以通过:动态给ref属性绑定一个函数每次组件更新时都会触发绑定的函数绑定函数的第一个参数就是当前DOM的引用。
当绑定元素被卸载时ref绑定的函数也会被调用一次不过此时表示DOM引用第一个参数值为null。
案例代码
templatediv!-- 绑定函数 --input :ref(el) console.log(这是绑定了匿名函数的ref,el) /input :reftest //div
/templatescript setupconst test (el) {console.log(这是绑定js方法的ref----,el);
}
/script
5、组件实例的引用
当一个子组件加入的父组件中时可以通过模板引用的方式给其设置ref属性从而获取到这个子组件的组件实例。
如果这个子组件使用的是选项式API或者使用setup() 钩子函数的组合式API则获取的组件实例与子组件的this完全相同我们可以通过该组件实例访问子组件的每一个属性和方法从而实现一些父子组件中的交互。当然这种方式并不推荐使用因为可能会引起逻辑混乱大多数情况下还是推荐使用使用标准的 props 和 emit 接口来实现父子组件交互。
但如果子组件使用的是script setup形式的组合式API则该组件的属性和方法默认是私有的默认情况下获取的组件实例是无法访问组件中的任何属性和方法的。除非子组件通过defineExpose()宏方法宏方法无需导入可直接使用主动向外暴露出一部分属性和方法然后获取的组件实例才可以访问这些被主动暴露的属性和方法。
案例代码
使用script setup形式的子组件Child.vue:
templatediv h3这是一个子组件/h3/div
/templatescript setup
import { ref } from vue
// 声明一个响应式变量
const son ref(我是script setup中的一个变量)
const son2 ref(我是script setup中的一个暴露出来的变量)// defineExpose 这样的编译器宏不需要导入
// 返回值会暴露给模板 能够被访问到
defineExpose({son2
})
/script使用setup() 钩子函数形式的子组件Child2.vue:
templatedivh3这是一个子组件/h3/div
/templatescript
// 引入响应式API
import { ref } from vueexport default {// 使用setup()钩子函数setup() {// 声明响应式变量const son ref(我是setup()钩子函数中的一个变量)// 返回值会暴露给模板和其他的选项式 API return {son}},
};
/script
使用选项式API的子组件Child3.vue
templatedivh3这是一个子组件/h3/div
/templatescript
export default {name: ViteProjectChild,data() {return {son: 我是选项式API中的一个变量};},
};
/script父组件
templatediv!-- 引入子组件 --Child refson1/ChildChild2 refson2/Child2Child3 refson3/Child3/div
/templatescript setup
import { ref, onMounted } from vue;
import Child from ../components/Child.vue;
import Child2 from ../components/Child2.vue;
import Child3 from ../components/Child3.vue;const son1 ref(null);
const son2 ref(null);
const son3 ref(null);onMounted(() {console.log(获取script setup的组合式API子组件----,son1.value); console.log(获取script setup的组合式API子组件的属性----,son1.value.son);console.log(获取script setup的组合式API子组件的属性2----,son1.value.son2);console.log(获取setup()钩子函数的组合式API子组件----,son2.value); console.log(获取setup()钩子函数的组合式API子组件的属性----,son2.value.son); console.log(获取选项式API的子组件----,son3.value); console.log(获取选项式API的子组件的属性----,son3.value.son);
})
/script
页面效果
