一、组件的生命周期
认识生命周期
什么是生命周期呢?
生物学上,生物生命周期指的是一个生物体在生命开始到结束 周而复始所历经的一系列变化过程;
每个组件都可能会经历从 创建 挂载 更新 卸载 等一系列的过程
在这个过程的某一个阶段 我们可能会想要 添加一些属于自己的代码逻辑(如组件创建后请求服务器数据)
但是我们 如何可以知道目前组件正在哪一个过程? Vue给我们提供了 组件的生命周期函数
生命周期函数:
生命周期函数是 一些钩子函数(回调函数),在 某个时间会被Vue源码内部进行回调
通过对生命周期函数的回调,我们可以知道 目前组件正在经历什么阶段
我们就可以在 该生命周期中编写属于自己的逻辑代码了
生命周期的流程
生命周期的过程分析
App/Home/Banner/ShowMessage
beforeCreate
1.创建组件实例
created(重要: 1 发送网络请求 2事件监听 3 this.$watch())
2.template模版编译
beforeMount
3.挂载到虚拟DOM -> 虚拟DOM -> 真实的DOM -> 用户界面看到 div
mounted(重要:元素已经被挂载 获取DOM 使用DOM)
4 数据更新 message发生改变
beforeUpdate
根据最新数据生成新的VNode 生成新的虚拟DOM -> 真实的DOM
Updated
5 不再使用 v-if="fasle"
beforeUnmount
将之前挂载在虚拟DOM中VNode从虚拟DOM中移除
unmounted(相对重要: 进行回收操作(取消事件监听))
最后 将组建实例销毁掉
二、组件中的ref引用
$refs的使用
我们在组件中想要直接获取到元素对象或子组件实例:
在Vue开发中我们是 不推荐进行原生DOM操作
这个时候 我们可以给元素或者组件绑定一个ref的attribute属性
组件实例有一个$refs属性:
他是一个Object,持有 注册过ref attribute 的所有DOM元素和组件实例
JavaScript // 3 获取banner 组件: 组件实例 // 不全等 实例, 以banner为模版 重新创建一个实例instance console.log(this.$refs.banner) // 拿到一个Proxy Proxy {bannerClick: ƒ, …} // 3 1 在父组件中可以主动的调用子组件的对象方法 this.$refs.banner.bannerClick() // 3 2 获取banner组件实例,获取banner中的元素 拿到根元素 console.log(this.$refs.banner.$el) // 3 3 如果banner template 是多个根 拿到的是 第一个Node节点 // 但是我要拿到有用的东西 所以使用 nextSibling // 主: 开发中 不推荐组件中 有多个根元素 console.log(this.$refs.banner.$el.nextSibling())
$parent和$root(了解)
K可以通过$parent访问父元素 $root访问根组件
三、动态组件的使用
切换组件案例
实现一个功能:
点击一个 tab-bar 切换不同的组件显示
目前可以通过两种不同的实现思路实现:
一:通过v-if来判断 显示不同的组件
二:动态组件的方式
通过v-if实现:
JavaScript <div class="view"> <!-- 1 第一种做法 通过v-if判断逻辑来决定 显示哪一个组件--> <template v-if="currentIndex === 0"> <home></home> </template> <template v-else-if="currentIndex === 1"> <About></About> </template> <template v-else-if="currentIndex === 2"> <Category></Category> </template> </div>
通过 动态组件 实现:
动态组件使用 component组件 通过一个特殊的attribute is来实现
这个currentTab的值需要是什么内容?
全局注册:可以通过 component函数注册的组件
布局注册:在一个 组件对象的components对象中注册的组件
动态组件的传值(应用较少)
如果是动态组件我们可以给它们传值和监听事件
我们需要将 属性和监听事件 放到 component上来使用
JavaScript <component name="xiong" :age="18" @homeClick="homeClick" :is="currentTab"> </component>
