vue之组件（动态组件及keep-alive）、VUE之过渡与动画和Vue阶段小结_vue 组件播放完过渡动画再销毁-优快云博客

本文详细介绍了Vue中的动态组件及其keep-alive特性，用于组件的缓存管理。接着讲解了Vue的过渡与动画效果，包括进入/离开过渡的类名和过渡模式。最后对Vue的MVVM架构进行了总结，并讨论了Vue的生命周期、组件间通信、Vue的优缺点以及模板编译原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE之组件（动态组件及keep-alive）

动态组件
Vue可以在不同组件之间进行动态切换，这种方法称为动态组件。
案例：选项卡效果
在这里插入图片描述

<div id="app">
			<div class="tab_area">
				<ul>
					<li v-for="tab of tabs" @click="tab_option=tab" v-bind:class="[tab_option==tab?'tab_act':'']">{{tab}}</li>
				</ul>
				<keep-alive>
					<component v-bind:is="tab_option"></component>
				</keep-alive>
			</div>
		</div>

<script>
			Vue.component('home',{
				template:`<div>11111111</div>`
			})
			Vue.component('size',{
				template:`<div>2222222</div>`
			})
			Vue.component('manager',{
				template:`<div>3333333</div>`
			})
			Vue.component('location',{
				template:`<div>44444</div>`
			})
			var app=new Vue({
				el:'#app',
				data:{
					tab_option:'home',
					tabs:['home','size','manager','location']
				}
			})
		</script>

动态组件嵌套
案例：
在这里插入图片描述

动态组件keep-alive（组件的失活缓存）

VUE之过渡与动画

过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换
v-enter(插入)类：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上，定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除)，最后在过渡/动画完成之后与v-enter-active一起移除。

v-leave(离开)类：

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上，定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，最后在过渡/动画完成之后与v-leave-active一起移除。

过渡概念图
在这里插入图片描述
过渡名
对于这些在过渡中切换的类名来说分两种，一种是没有name名字，另一种是有name（推荐）。

如果使用一个没有名字的，则 v- 是这些类名的默认前缀
如果使用了，那么 v-enter 会替换为 my-transition-enter。

过渡名—没有名字
隐藏案例：
在这里插入图片描述

过渡名—有名字
切换案例

多元素过渡
多元素过渡可以通过v-if条件指令进行控制。

注：点击验证后发现，在过渡过程中area区域被重绘了，一个离开过渡的时候另一个开始进入过渡。
这是的默认行为 - 即进入和离开同时发生。
方案：在元素绝对定位时候运行正常：
在这里插入图片描述

也可以给元素加上转换属性，实现滑动过渡的效果。

多元素过渡—过渡模式
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了两种过渡模式。

in-out：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

vue阶段小结

什么是mvvm？
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
mvvm和mvc区别？它和库jquery的区别是什么？哪些场景适合？
mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
区别：vue数据驱动，通过数据来显示视图层而不是节点操作
vue的优点是什么？
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
组件之间的传值？
路由之间跳转
模板声明式（标签跳转）模块编程式（ js跳转）
vue.cli中怎样使用自定义的组件
第一步：在components子组件目录新建你的组件文件（indexPage.vue），script一定要export default {}
第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’
第三步：注入到vue的子组件的components属性上面,components:{indexPage}
第四步：在template视图view中使用，单标签双标签
v-show和v-if指令的共同点和不同点？
如何让CSS只在当前组件中起作用
将当前组件的style修改为style scoped
keep-alive的作用是什么?
失活缓存，keep-alive 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
生命周期相关
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
什么是vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
vue生命周期的作用是什么
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
DOM 渲染在哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。
简单描述每个周期具体适合哪些场景
vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
为什么使用key？
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
为什么避免 v-if 和 v-for 用在一起
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。
VNode是什么？虚拟 DOM是什么？
Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
Vue的优缺点是什么
优点：低耦合，可重用性，独立开发，可测试，渐进式
缺点：不利于SEO搜索引擎优化，社区维护力度不强，相比还不够成熟
组件之间传值
父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；
子向父传值：事件传值，子组件通过$emit(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收
vue的template的理解
通过compile编译template生成AST语法树，AST语法树经过generate转化为render function字符串后返回虚拟DOM节点(Vnode)的过程
单页面和多页面的区别
vue与node和npm关系
①node功能

②webpack

③关系梳理