Vue笔记(五)--组件进阶

这一节了解一下Vue3中的组件进阶组件在被创建出来到渲染完成会经历一系列过程同样组件的销毁也会经历一系列过程组件从创建到销毁的这一系列过程被称为组件生命周期生命周期的节点被定义一系列方法也被称为生命周期钩子。简单总结:API1. beforeCreate含义组件实例刚创建数据、方法都未初始化 作用几乎不用不能操作 this 数据script export default { beforeCreate() { console.log(组件即将创建) } } /script2. created含义组件创建完成数据 / 方法已初始化但未生成 DOM 作用请求接口、初始化数据、定时器script export default { data(){return {list:[]}}, created(){ console.log(组件创建完毕可请求数据) } } /script3. beforeMount含义挂载 DOM 之前 作用挂载前最后一次修改模板数据script export default { beforeMount(){ console.log(即将渲染DOM) } } /script4. mounted 最常用含义DOM 已渲染挂载完成 作用操作 DOM、初始化插件、开启定时器、请求数据templateview我是组件/view/template script export default { mounted(){ console.log(DOM已挂载完毕) } } /script5. beforeUpdate含义数据变化视图重新渲染前 作用更新前获取旧 DOM 状态script export default { beforeUpdate(){ console.log(视图即将更新) } } /script6. updated含义视图更新完成 作用更新后操作 DOMscript export default { updated(){ console.log(视图已更新) } } /script7. beforeUnmount含义组件销毁前 作用清除定时器、移除监听script export default { beforeUnmount(){ clearInterval(this.timer) } } /script8. unmounted含义组件完全销毁 作用收尾清理工作script export default { unmounted(){ console.log(组件已销毁) } } /script9. props 类型校验含义限制传入参数类型 作用规范传参、控制台报错提示script export default { props:{ name:String, age:Number } } /script10. props required含义强制必须传参 作用保证组件必备参数script export default { props:{ title:{ type:String, required:true } } } /script11. props default 默认值含义未传参时使用默认值 作用防止报错、给默认展示script export default { props:{ msg:{ type:String, default:默认提示 } } } /script12. props validator 自定义校验含义自定义规则校验参数 作用范围、格式限制script export default { props:{ score:{ validator(val){ return val0 val100 } } } } /script13. props 单向只读含义子组件不能修改 props 作用遵循单向数据流避免数据混乱template view{{ title }}/view /template script export default { props:[title], methods:{ change(){ // 错误不能修改 props // this.title xxx } } } /script14. 局部 Mixin含义抽取公共逻辑复用 作用复用生命周期、方法、数据script // 定义混入 const myMixin { created(){console.log(mixin 加载)} } export default { mixins:[myMixin] } /script15. 全局 Mixin含义所有组件自动混入 作用全局公共逻辑import { createApp } from vue const app createApp() app.mixin({ mounted(){console.log(每个组件都触发)} })16. Mixin 合并规则含义生命周期先执行 mixin 再组件选项以组件优先 作用理解覆盖逻辑script const m { mounted(){console.log(mixin)}} export default { mixins:[m], mounted(){console.log(组件自身)} } /script17. 局部自定义指令含义封装 DOM 操作逻辑 作用自动聚焦、权限按钮template input v-focus / /template script export default { directives:{ focus:{ mounted(el){el.focus()} } } } /script18. 全局自定义指令含义全局所有组件可用app.directive(focus,{ mounted(el){el.focus()} })19. 指令传参含义指令可传递参数、修饰符 作用灵活配置指令行为template view v-colorred文字/view /template script export default { directives:{ color:{ mounted(el,binding){ el.style.color binding.value } } } } /script20. provide 提供含义父 / 祖先向下提供数据 作用多层嵌套不用逐层 propsscript setup import { provide } from vue provide(appName,Vue3项目) /script21. inject 注入含义后代组件接收数据 作用跨层级取值script setup import { inject } from vue const name inject(appName) /script22. Teleport含义将组件 DOM 传送到指定节点 作用弹窗、浮层不受父样式嵌套影响template teleport tobody view classmask我是全局弹窗/view /teleport /template style .mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);} /style栗子:template view classcontainer button clickshowLife !showLife显示/隐藏生命周期组件/button view v-ifshowLife LifeDemo / /view PropsDemo title我是标题 :score88 / view classmt20 input v-focus placeholder进入页面自动聚焦 classinput / /view InjectDemo / button clickshowModal true classmt20打开Teleport弹窗/button teleport tobody view v-ifshowModal classmask view classmodal-box text全局弹窗不受父样式限制/text button clickshowModal false classmt20关闭/button /view /view /teleport /view /template script setup import { ref, provide } from vue // 控制生命周期组件显示 const showLife ref(true) const showModal ref(false) const LifeDemo { created() { console.log(1.created 组件创建完成) }, mounted() { console.log(2.mounted DOM挂载完毕) }, beforeUnmount() { console.log(3.beforeUnmount 准备销毁) }, unmounted() { console.log(4.unmounted 组件已销毁) }, template: view classmt20生命周期组件/view } const PropsDemo { props: { title: { type: String, default: 默认标题 }, score: { type: Number, validator: val val 0 val 100 } }, template: view classmt20标题{{title}} 分数{{score}}/view } const directives { focus: { mounted(el) { // 自动聚焦 el.focus() } } } const myMixin { created() { console.log(Mixin 公共逻辑执行) } } provide(appInfo, { name: Vue3进阶项目, version: 2.0 }) const InjectDemo { inject: [appInfo], template: view classmt20项目名称{{appInfo.name}}/view } /script style scoped .container { padding: 30rpx; } .mt20 { margin-top: 20rpx; } .input { border: 1rpx solid #eee; padding: 20rpx; border-radius: 10rpx; } .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .modal-box { background: #fff; padding: 40rpx; border-radius: 15rpx; } /style