Vue | Vue.js 组件化知识拓展_vue.js拓展阅读资料-CSDN博客

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">

  <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>

四、keep-alive组件(内置组件)

认识keep-alive(保持存活)

我们先对之前的案例中About组件进行改造:

其中增加一个递增功能

如果我们将counter点到10 那么在切换到about再切换回home时状态是否保持?

不保持因为默认情况下,切换组件后 about组件会被销毁掉,再次回来时会重新创建组件

但是在开发中某些情况我们希望继续保持组件状态,不被销毁掉,我们可以使用一个内置组件:keep-alive.

JavaScript
<keep-alive include="home,about">
<component :is="currentTab"></component>
</keep-alive>

keep-alive属性

keep-alive有一些属性:

Include - string | RegExp | Array 只有名称匹配的组件会被缓存;

Exclude - string | RegExp | Array 任何名称匹配的组件都不会被缓存

Max - number | string 最多可以缓存多少组件实例达到这个数字,缓存组件中最近没被访问的实例会被销毁

include和exclude prop允许组件有条件地缓存:

两者都可以用逗号分隔字符串正则表达式或一个数组来表示:

匹配首先检查组件自身的name选项

缓存组件的生命周期

对于缓存的组件来说再次进入时我们是不会执行created或者mounted等生命周期函数的

但是我们有时候希望监听到何时进入到组件中何时离开了

这个时候可以使用activated 和 deactivated 这两个生命周期钩子函数来监听

JavaScript
// 对于保持keep-alive组件监听有没有进行切换
// Vue专门准备了两个生命周期可以进行监听
// keep-alive组件进入活跃状态
  activated() {
    console.log("home activated")
  },
  // 进入不活跃状态
  deactivated() {
    console.log("home deactivated")
  }

五、异步组件的使用

Webpack的代码分包

默认的打包过程:

默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的那么webpack在打包时就会将组件模块打包到一起

这个时候随着项目的不断庞大,app.js文件的内容过大,会造成首屏渲染速度慢的问题

打包时代码的分包

所以对于这些不需要立即使用的组件我们可以单独对它们进行拆分,拆分成一些小的代码块chunk.js

这些chunk.js会在需要时从服务器加载下来,并且运行代码显示对应的内容;

webpack中如何可以对代码进行打包?

JavaScript
//如果要进行分包,那么就要使用 defineAsyncComponent 括号里面接一个函数 components里要: 函数名
const AsyncCategory = defineAsyncComponent(()=> import("./views/Category"))

Vue中实现异步组件

如果项目过大,对于某些组件我们希望通过异步的方式进行加载(目的可以对其进行分包处理),那么Vue中给我们提供了一个函数:defineAsyncComponent

defineAsyneComponent接收两种类型的参数:

类型一:工厂函数,该工厂函数需要返回一个Promise对象

类型二:接受一个对象类型,对异步函数进行配置

工厂函数类型一的写法:

异步组件的写法二(了解)

六、组件的v-model

组件的v-model

在input中可以使用v-model来完成双向绑定:

这个时候我们会非常方便,因为v-model默认会帮助我们完成两件事情;

v-bind:value的数据绑定和@input的事件监听;

我们现在封装一个组件,其他地方使用这个组件时是否也可以使用v-model来同时完成这两个功能?

可以的,vue也支持在组件上使用v-model

当我们在组件上使用的时候等价于下面的操作:

我们会发现和 input元素不同的只是属性的名称和事件触发的名称而已

JavaScript
// 2 组件的v-model(重点掌握4)
<counter v-model="appCounter"></counter>
//上面写法等同于
<counter :modelValue="appCounter" @update:modelValue="appCounter = $event"></counter>