vue学习基础（6）生命周期钩子函数、slot插槽的使用、动态组件和缓存

1. 生命周期 1.1 生命周期图 1.2 生命周期函数 钩子函数 描述 beforeCreate 创建Vue实例之前调用(没有任何的数据) created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） beforeMount 渲染DOM之前调用 mounted 渲染DOM之后调用 beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） updated 重新渲染完成之后调用 beforeDestroy 销毁之前调用 de

续上文的生命周期,补充两个钩子函数 activated - 激活 deactivated - 失去激活状态 组件的高级用法: 1.使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁 用途:不会频繁的创建和销毁组件, 页面更快呈现 <keep-alive> <component :i...

先来看看官网对keep-alive的一些功能说明：组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。就可以使用到keep-alive，它可以用来进行动态组件的缓存组件复用，提高性能 缓存不太使用的组件，而不是直接销毁 在实际项目开发的时候，我们可能需要具体的某个项目可以进行缓存，那么如何通过keep-alive来实现呢？include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存 exclude：[String,RegExp,Array] 匹

目录 Vue指令 v-model 修饰符 v-bind:（:） 修饰符 绑定属性 绑定样式 对象和数组的绑定的方式注意点 v-on:（@） 修饰符 v-show v-if v-else v-else-if v-for 复用原则导致数据混乱问题 解决方法 v-text v-html v-once v-clock v-slot:(#) 自定义指令 自定义全局指令 Vue.directive('color',{bind(el,obj,vnode,oldVnode)

组件(Component)是Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。封装性和隔离性非常强。组件相当于Python中的模块，扩展HTML元素，可以重复使用的代码，使用它就是为了重复使用例如：一个轮播图需要使用放到很多页面当中使用，一个轮播图有它自己的js、css、html，而组件就可以快捷的做出一个轮播图，有自己的js、css、html放到一起，有自己的逻辑样式这样到哪里都可以使用了，无需在写重复代码模块化： 是从代码逻辑的角度进行划分的；

keep-alive 概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 场景 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，希望列表页面可以保留用户的筛选（或选中）状态。 keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性

Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）并且可以作为承载分发内容的出口 .插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到模板template指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

错误笔记：表示路径有两出错误！！！ 解决：根据提示的代码去找出问题即可。 动态组件： 我们为什么需要使用动态组件？动态组件有什么用？ 应用场景： 当我们在一个组件进行多个组件的切换的时候，我们就能使用动态组件--也可以使用if-else-if但是这种太过繁琐。 作用： 使用动态组件能提高性能。会涉及到component内置组件。 具体的步骤： 1.引入组件--数据记录需要切换的组件名：---使用内置组件<component>,----绑定按钮事件。 组件缓..

占位符,这是vue封装的标签，在中间写内容，就会显示在slot标签中 出现几个slot标签，就会出现几次子组件的内容在slot标签上添加name属性，在template标签上对应使用v-slot，注意templat标签我们写在组件标签之中，另外代码不全，看个格式就好了 作用域插槽 作用域插槽其实与具名插槽是相对比较接近的，同样是要给slot标签添加name属性，并且在template标签中通过v-slot找到相应的占位符，但是作用域插槽，在创建组件的时候，将一些变量绑定在了组件上（类似......

本文系统介绍了Vue组件开发的核心要点。主要内容包括：1.组件基础概念：单文件组件结构(.vue)、组件通信方式(props/emit)和生命周期钩子；2.高级组件技术：动态组件(:is)、异步组件(defineAsyncComponent)、插槽(slot)和作用域样式(scoped)；3.组件优化实践：懒加载、keep-alive缓存、组合式API复用逻辑；4.组件开发规范：类型声明、单元测试和文档建设。文章重点演示了动态加载组件的多种实现方案，包括基础用法、参数传递、状态管理和性能优化技巧。

除了允许用户自定义组件之外，Vue还内置了一些组件，以帮助用户高效地开发一些功能。本章将带领大家一起来了解这些内置组件。 某些时候需要动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。 component接收一个名为is的属性，is的值应为在父组件中注册过的组件的名称，用法如下： < !-- view为变量 --> 下面来看一个示例，代码如下： <li class=“per-tab” @click=“toggleView(‘Home’)”>Home

slot 可以让我们在组件中书写内容 <div id="app"> <Hello> <header> 头部 </header> <section> 内容 </section> <footer> 底部 </footer&gt...

第一部分：keep-alive组件 一.动态组件（component标签） 语法：.<component :is="变量"></component> 注意：:is="组件注册后的标签名字符串或data变量" 不能直接拿注册标签名赋值使用 需求：tab栏切换： component标签的原理：在父组件中对子组件创建销毁 <template> <div> 我是父组件App.vue <!--子组件名 <Myone /><My

本篇文章分成了两个部分，第一部分是组件基础，介绍全局组件、局部组件的注册，动态组件和异步组件的使用等等，第二部分是组件之间的通信方式，本文整理了13种，在下面依次介绍。文章较长，看的时候要有耐心哦~ 组件基础 我们在制作一个网站的时候，通常会用到代码相同的部分，比如说导航栏，如果不能很好的复用，那么就会导致大量重复代码，不好维护，vue中的组件，很好的解决了这个问题，什么是组件呢？ 组件是可复用...

component keep-alive slot 自定义指令 directives

多个组件有相同的逻辑，抽离出来， mixin: [mixin] //与当前组件的script合并，起到逻辑提取复用，**多个mixin容易data、method命名冲突。** 多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。**钩子函数会两个都被调用，mixin中的钩子首先执行。** 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 **比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

前端学习

什么是动态组件,如何使用动态组件，如何切换 在同一个挂载点，可以切换显示不同组件。vue内置的component组件，配合is属性。只要改变is属性的值，变为要显示的组件名即可 组件缓存 vue内置的keep-alive组件把要缓存的组件包起来，这要不会频繁的创建和销毁组件，页面更快呈现。通过组件的activated和deactivated来判断组件的存活状态 组件插槽 当组件内某一部分标签不确定时，可以使用插槽技术。先在组件内使用slot占位，使用组件时传入具体标签。传入的标签会替换.