Vue组件——动态、缓存、异步组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue组件——动态、缓存、异步组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 动态组件 component

语法：静态：<component is="组件名"></component>

动态：<component :is="组件名"></component>

可以用来实现页面的切换：

// 模板
    <component :is="n"></component>
    <button @click="fn('Box1')">btn_box1</button>
    <button @click="fn('Box2')">btn_box2</button>
    <button @click="this.n = 'Box3'">btn_box3</button>

// 方法
<script>
// 同步引入组件
import Box1 from "./components/Box1.vue"
import Box2 from "./components/Box2.vue"
import Box3 from "./components/Box3.vue"
export default{
    methods: {
        fn(arg) {
            this.n = arg
        }
    },
}
</script>

问题：当我们在其中一个组件中写了一个输入框，在输入过一次后，切换到其他页面然后再切换回来时，之前输入的值就没有了。因为切换走当前组件时，该组件就销毁了，再切换回来时，又会重新挂载一次，所以前面的操作就都没有了。

想要实现即时我切换走当前组件，下次切换回来时之前的操作还在，就可以使用缓存组件，将该组件缓存起来。

2. 缓存组件——keep-alive

2.1 语法——与动态组件搭配使用

<keep-alive> <component is="组件名"></component> </keep-alive>

1. 属性include：包括谁就只缓存谁

exclude：除了xx，其余都缓存

写法：1. include="Box1" 用得多

2. :include="/Box1|Box3/" 加了:时等号后面的为js语言环境，可以写正则表达式

3. :include="变量名"

简单使用案例：缓存Box1，Box3组件，也就是切换走时不销毁这两个组件；切换走Box2时，Box2就销毁了，下次切换到Box2时，该组件就mounted一次。

        <keep-alive include="Box1,Box3">
            <component :is="n"></component>
        </keep-alive>

Vue组件——动态、缓存、异步组件

此时也出现了一个问题，当我在1组件勾选了一些选项时，切换到2组件又勾选了其他的选项，再切换回1组件，它缓存了之前的数据，就不会新增后面的筛选条件。比如说：在逛淘宝的时候，我先搜索了短袖，在筛选组件中勾选了几个筛选条件，那它展示的商品就会限定在一定范围内一般会在生命周期函数的mounted函数中实现首屏数据，当

2.2 缓存组件的两个钩子函数——activated/deactivated

1. 活跃状态——activated

渲染函数，切换一次页面，就调用一次渲染函数，回到这个组件时做操作（比如再做网络请求）activated() { console.log("box1渲染了一次"); }

2. 失效状态——deactivated

用于切换前缓存用户的数据。之前介绍生命周期函数时，缓存用户关闭页面前的相关数据（比如：音乐、视频播放事件），可以在销毁钩子（unmounted）中实现，但前面缓存在组件，缓存的组件不会销毁，也就是没有销毁钩子。但又想实现上面写的问题，所以Vue框架提供了deactivated函数来缓存用户的最后操作。离开这个组件时做操作deactivated() { }

简单案例：基于上面的动态组件

// Box1组件
// 1. template标签内
// 双向数据绑定v-model
<input type="text" v-model="email"><br>
<input type="text" v-model="tel">

// 2. script标签内
<script>
export default {
   activated() {
        console.log("box1渲染了一次");        
    },
    // 离开这个组件时做操作
    deactivated() {
        console.log("缓存用户离开Box1前的数据");
        // 这里缓存用户离开该组件前的数据
    }
}
</script>

Vue组件——动态、缓存、异步组件