Vue——动态组件、缓存组件keep-alive、异步组件

目录

组件高级

2.动态组件

3.缓存组件keep-alive

4.异步组件 (高薪意向)

方法一：通过webpack2.0的按需加载 (不常用)

方法二：通过webpack2+es2015返回一个promise  （import函数）(主流 ，常用)

方法三：高级异步组件（可以处理加载状态）

---

组件高级

1、传值     2.动态组件    3.缓存组件keep-alive     4.异步组件(高薪意向)

2.动态组件

有的时候，我们希望页面中的某个地方，在不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件

component 标签的 is属性语法：is后跟组件的变量名决定使用哪个组件来渲染

is是组件名  :is是data中的变量中保存的组件名

     ==>

Sinabox是一个组件名，字符串，帮我们写代码

mycomponent就是一个变量了，去下面取

App.vue

<script>
	import Box1 from "./Box1.vue"
	import Box2 from "./Box2.vue"
	import Box3 from "./Box3.vue"
	export default {
		data() {
			return {
				arr: [true,false,false],
				mytemp:"Box2"
			}
		},
		components:{
			Box1,
			Box2,
			Box3
		},
		methods:{
			fn(index){
				// console.log(66666)
				// this.arr.fill(false)
				// // console.log(this.arr)
				// this.$set(this.arr,index,true)
				this.mytemp=index
			}
		}
	}
script>
<style>
style>

Box1/Box2/Box3.vue

<script>
	export default {
	}
script>
<style>
style>

3.缓存组件keep-alive

动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。
有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件

失活的组件将会被缓存！默认全部加载过的组件就会缓存起来

 

 提供有 include  、exclude 、max

（可以写组件名字符串，也可以写正则表达式）

 
 

include==> 表示a,b组件被缓存，其他组件不缓存

exclude==>代表除了xx组件其他的组件缓存

max==> 最多可以缓存多少个组件实例，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉

eg==>  ：max=“2”==>代表缓存最近被渲染的2个组件

匹配首先检查组件自身的 name 选项,匿名组件不能被匹配。

keep-alive 提供了钩子函数==>

1、activated ==>在切回来的时候，又再次执行这个函数，就可以在里面做网络请求

==>使用场景： 上面的大分类，点了之后，去选择下面小分类，进行网络请求

2、deactivated==>离开某个组件的时候触发

（在2.2.0及其更高版本中，这两个函数必须用在keep-alive 里面树内的所有嵌套组件中才会触发）

App.vue

<script>
	import Box1 from "./Box1.vue"
	import Box2 from "./Box2.vue"
	import Box3 from "./Box3.vue"
	export default {
		data() {
			return {
				arr: [true, false, false],
				mytemp: "Box1"
			}
		},
		components: {
			Box1,
			Box2,
			Box3
		},
		methods: {
			fn(index) {
				this.mytemp = index
			}
		}
	}
script>
<style>
style>

Box1.vue