Vue | Vue.js 组件化 知识拓展(一)

简介: Vue | Vue.js 组件化 知识拓展(一)

一、组件的生命周期

认识生命周期

什么是生命周期呢?


       生物学上,生物生命周期指的是一个生物体在生命开始到结束 周而复始所历经的一系列变化过程;


       每个组件都可能会经历从 创建 挂载 更新 卸载 等一系列的过程


       在这个过程的某一个阶段 我们可能会想要 添加一些属于自己的代码逻辑(如组件创建后请求服务器数据)


       但是我们 如何可以知道目前组件正在哪一个过程? Vue给我们提供了 组件的生命周期函数


命周期函数:


       生命周期函数是 一些钩子函数(回调函数),在 某个时间会被Vue源码内部进行回调


       通过对生命周期函数的回调,我们可以知道 目前组件正在经历什么阶段


       我们就可以在 该生命周期中编写属于自己的逻辑代码了

生命周期的流程


36c72a99113a43c2a2e9b3210a37944e.jpg

a6dba969f8734004a832e5107ace026d.png

生命周期的过程分析

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来实现

c32164481dbf468bb9e1af7f86fbec9e.png

这个currentTab的值需要是什么内容?


       全局注册:可以通过 component函数注册的组件


       布局注册:在一个 组件对象的components对象中注册的组件

动态组件的传值(应用较少)

如果是动态组件我们可以给它们传值和监听事件


       我们需要将 属性和监听事件 放到 component上来使用

JavaScript
<component name="xiong"
   :age="18"
   @homeClick="homeClick"
   :is="currentTab">
</component>


相关文章
|
23小时前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
8 0
|
1天前
|
JavaScript 前端开发 开发者
vue组件化开发,与渐进式框架讲解
vue组件化开发,与渐进式框架讲解
6 3
|
2天前
|
JavaScript
Vue中的mixin和extend有什么区别?
Vue中的mixin和extend有什么区别?
9 0
|
2天前
|
JavaScript
Vue中的$nextTick方法的作用是什么?举例说明
Vue中的$nextTick方法的作用是什么?举例说明
10 1
|
2天前
|
JavaScript
在Vue中,如何实现生命周期钩子函数的多态?
在Vue中,如何实现生命周期钩子函数的多态?
5 0
|
2天前
|
JavaScript
在Vue中,如何使用自定义指令?
在Vue中,如何使用自定义指令?
10 1
|
2天前
|
缓存 JavaScript
Vue中的动态组件是什么?如何使用?
Vue中的动态组件是什么?如何使用?
7 1
|
3天前
|
资源调度 JavaScript 开发者
百度搜索:蓝易云【vue使用nuxt.js详情】
通过以上简要详情,你可以快速上手Nuxt.js,并利用其强大的服务端渲染能力构建通用、高性能的Vue.js应用。买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
21 8
|
14天前
|
JavaScript 前端开发 编译器
Vue 模板是如何编译的?
Vue 模板是如何编译的?
16 0

相关产品

  • 云迁移中心