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

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

四、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选项

d8c8f4941755478ba06882ed9fdcedb1.png

缓存组件的生命周期

对于缓存的组件来说 再次进入时 我们是不会执行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中如何可以对代码进行打包?

bc59df4f131a4104961a21ea479b723a.png

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

Vue中实现异步组件

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


defineAsyneComponent接收两种类型的参数:


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


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


工厂函数类型一的写法:

de4a7c5fee1c46109469a0da55809f95.png

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

8e0bb015455c4ed5b734d417873d5216.png

六、组件的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>

组件v-model的实现

为了我们的MyInput组件可以正常的工作,这个组件内的<input>必须:


       将其value attribute 绑定到一个名叫 modelValue的prop上;


       在其input事件被触发时 将新的值通过 自定义的update:modelValue事件 抛出


MyInput.vue的组件代码如下:

76ca83ed3a6b480c82eae59aeac25970.png

绑定多个属性

通过v-model直接绑定一个属性,如果我们希望 绑定多个属性?


       我们希望在一个组件上使用多个v-model是否可以实现呢?


               默认情况下 v-model其实是 绑定了modelValue属性 和 @update:modelValue 的事件


               我们希望绑定更多 可以给v-model传入一个参数,参数的名称就是我们绑定属性的名称


注: 这里绑定了两个属性

JavaScript
<!--    3 组件的v-model 自定义名称 counter-->
      <counter2 v-model:counter="appCounter" v-model:xiong="appXiong"></counter2>

v-model:title 相当于做了两件事:


       绑定了 title属性; 监听了@update:title的事件

ea55fe06ab21452290f232e85528fb95.png

七、组件的混入 Mixin

认识Mixin

目前 我们是使用组件化的方式开发整个Vue的应用程序,但是 组件和组件之间有时候会存在相同的代码逻辑,我们希望对 相同的代码逻辑进行抽取


在Vue2和3只能改都支持的一种方式就是使用Mixin来完成


       Mixin提供了一种非常灵活的方式,来 分发Vue组件中的可复用功能


       一个Mixin对象可以包含 任何组件选项;


       当组件使用Mixin对象时 所有Mixin对象的选项将被 混合 进入该组件本身的选项 中

Mixin的基本使用

165f8f52a61a4e40a2af4f25601e8553.png

Mixin的合并规则

如果Mixin对象中的选项和组件对象中的选项发生冲突,Vue操作如下:


       分成不同情况来进行处理:


一:如果是data函数的返回值对象


       返回值对象默认情况下会 进行合并


       如果data返回值对象的属性发生了冲突,那么会保留组件自身的数据


二:生命周期钩子函数


       会被合并到数组中,都会被调用


三:值为 对象的选项 如 methods components和directives 将被合并为同一个对象


       如 都有methods选项 都定义了方法,那么它们都会生效


       如果对象的key相同 那么会取组件对象的键值对


全局混入

b025c8f86d1945e093dc27ce3a06a6bc.png

相关文章
|
4天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
39 1
|
15天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
46 1
vue学习第一章
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
43 2
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
33 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
35 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能