精华内容
下载资源
问答
  • 2022-04-08 20:17:53

    缓存路由组件

    1、作用:让不展示的路由组件保持挂载,不被销毁

    2、具体编码

    //缓存一个路由组件
    <keep-alive include="News">   //include里面要写组件名
      <router-view></router-view>
    </keep-alive>
    
    
    //缓存多个路由组件,利用数组形式
    <keep-alive :include="['News','Messages']">

    两个生命周期钩子

    1、作用:路由组件独有的两个钩子,用于捕获路由组件的激活状态

    2、具体名字:

    activated路由组件被激活时触发

    deactivated路由组件失活时触发 

    更多相关内容
  • vue组件生命周期

    2022-04-01 17:58:58
    vue的官网上,有一个很难懂的图,还是英文的········ 简单总结一下,方面处理数据和渲染dom beforeCreate:dom和data以及motheds未定义; creaded:dom未定义,data和motheds定义; beforemount:dom...

    在vue的官网上,有一个很难懂的图,还是英文的········

    简单总结一下,方面处理数据和渲染dom

    第一个:单独组件的生命周期;

    1. beforeCreate:dom和data以及motheds未定义;
    2. creaded:dom未定义,data和motheds定义;
    3. beforemount:dom和data以及motheds已经定义,但是dom上利用的data和motheds并没有被赋值和渲染;
    4. mounted:dom和data以及motheds已经定义,并且已经渲染;
    5. beforeUpdate和updated都是在data改变后才执行;
    6. actived:这个想必很少用到,这个只有在用到vue的标签<keep-alive>才会触发,方便保存数据,避免第二次进入界面时重复调用接口

    说一下<keep-alive>

    keep-alive是vue的内部标签,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。sas

    第二个:Vue中父组件和子组件在一起的生命周期。

    创建时:
    1.父--beforeCreate

    2.父--created

    3.父--beforeMounted

    4.子--beforeCreate

    5.子--created

    6.子--beforeMounted

    7.子--mounted

    8.子--actived(如过有<keep-alive>标签)

    9.父--mounted

    10.父--actived(如过有<keep-alive>标签)

    销毁时:

    1.父--beforeDestroy

    2.子--beforeDestroy

    3.子--destroyed

    4.父--destroyed

    展开全文
  • Vue缓存路由(keep-alive)以及新的生命周期

    缓存路由

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

    假设我们有登录,注册两个路由组件。登录组件切换到注册组件,登录组件的生命周期,从进入时的创建到离开时的销毁。当我们页面从注册组件切换回登录组件的时候。登录组件已经被销毁了,之前的数据是不会存在的。这是时候我们可以用keep-alive 来保存数据。

    使用方式:在keep-alive里面放入要缓存的组件。

    被keep-alive包裹的所有组件,都还不会销毁以及重新渲染。

    来验证一下:

    App.vue

    <template>
      <div id="app">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
    <style lang="scss">
    
    
    </style>
    

    注册组件:生成一个随机数,点击登录的时候,传递参数。

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>注册</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="Regist">注册</el-button>
                <div style="margin-top: 20px">
                    <button @click="toLogin">登录</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name: "Regist",
            data(){
                return {
                    userName:'',
                    pwd:'',
                    id:Math.random()
                }
            },
            methods:{
                Regist(){
    
                },
                toLogin(){
                    this.$router.push({
                        path: '/Login',
                        query:{//传参
                            id:this.id
                        }
                    })
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    登录组件:

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>登录</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
                <div style="margin-top: 20px">
                    <button @click="toRegist">注册</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name:'Login',
            data(){
                return {
                    userName:'',
                    pwd:'',
                }
            },
            methods:{
                toRegist(){
                    this.$router.go(-1)
                },
                login(){
                    // localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }
            },
            created(){//接收参数,赋值给userName
                this.userName = this.$route.query.id
            },
            beforeDestroy(){
                console.log('我马上被销毁了');
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    效果图:

    第二次切换:

     

    问题来了,这时候我们会发现,第一次和第二次传递过来的随机数是一样的。

    原因是注册组件也被缓存起来了,并不会重新执行。所以传的随机数是一样的。

    那有什么可以使注册组件不被缓存呢?这就需要用到include以及exclude属性

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • 官方文档:API — Vue.js

    代码:

    <template>
      <div id="app">
        <!--include:匹配的组件会被缓存-->
        <!--注意:include的value值是组件的name值-->
        <!--如果router-view有多个组件都需要被缓存。可以使用数组的形式  :include="['Login','Regist']"  -->
        <!--exclude:匹配的组件都不会被缓存-->
    
        <keep-alive include="Login">
          <router-view/>
        </keep-alive>
    
    
        <!--<router-view/>-->
      </div>
    </template>
    
    <style lang="scss">
    
    
    </style>
    

    两个新的生命周期钩子

    作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。只适用于keep-alive

    activated :路由组件被激活时触发。(当进入缓存的路由组件时触发)

    deactivated:路由组件失活时触发。(当离开缓存的路由组件时触发)

    使用方法:

    接着上面的代码,我们之缓存了Login组件,Regist组件并没有被缓存。所以现在的效果是每次切换的随机数都不一致。

    第一次切换:

     

     第二次切换:

     上面的效果图可以看出来,虽然每次传的参数都不一样,但是登录组件一直是都是保存第一次传过来的值。这是时候如果要同步注册组件传过来的参数。就需要用到activated这个生命周期。

    代码:

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>登录</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
                <div style="margin-top: 20px">
                    <button @click="toRegist">注册</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name:'Login',
            data(){
                return {
                    userName:'',
                    pwd:'',
                }
            },
            methods:{
                toRegist(){
                    this.$router.go(-1)
                },
                login(){
                    // localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }
            },
            created(){
                this.userName = this.$route.query.id
            },
            beforeDestroy(){
                console.log('我马上被销毁了');
            },
            // 当缓存组件被激活的时候执行
            activated(){
                this.userName = this.$route.query.id
            },
        }
    </script>
    
    <style scoped>
    
    </style>

    以上就是缓存路由组件的基本使用。

    展开全文
  • Vue 组件生命周期

    2022-04-18 23:01:54
    组件生命周期分为四个阶段:create(创建)、mount(挂载)、update(更新)、destroy(销毁) 。每个阶段有"之前"、"之后"两个,总共有 8 个生命周期钩子函数。 Vue 官网对生命周期的详细示意图: ...

            每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

            组件的生命周期分为四个阶段:create(创建)、mount(挂载)、update(更新)、destroy(销毁) 。每个阶段有"之前"、"之后"两个,总共有 8 个生命周期钩子函数。

    Vue 生命周期示意图:

    生命周期函数 

    beforeCreate:

    1. 刚初始化了一个 Vue 空的实例对象;
    2. data methods 还没有初始化;
    3. 真实 DOM 没有渲染出来;

    created

    1. 组件创建结束;
    2. 可以操作 data 数据,和调用 methods 方法
    3. 进行ajax请求异步数据的、初始化数据
    4. 真实 DOM 没有渲染出来;

    beforeMount

    1. 模板编译好了,尚未挂载到页面;
    2. 真实 DOM 没有渲染出来;

    mounted

    1. 组件挂载好了;
    2. 可以进行真实dom的操作

    beforeUpdate

    1. data 数据更改后触发;
    2. 可以触发多次,只要数据更新就会触发;

    updated

    1. 页面更新完成时触发;
    2. 可以触发多次,只要数据更新就会触发;

    beforeDestroy

    1. 销毁前触发;
    2. vue 实例上 datamethods,指令等处于可用状态;
    3. 可以执行计时器的关闭,第三方实例的删除

    destroyed

    1. 销毁后触发;
    2. vue 实例上 datamethods,指令等处于不可用状态;

    keep-alive

            添加 keep-alive 标签后会增加 activateddeactivated 这两个生命周期函数,初始化操作放在 actived 里面,一旦切换组件,因为组件是缓存的而没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在 deactived 里面,在里面进行一些善后操作,这个时候 created 钩子函数只会组件首次加载时执行一次,销毁的钩子函数一直没有执行。

            activated(组件激活时):被 keep-alive 缓存的组件激活时调用,可以初始化一些数据。

            deactivated(组件停用时):被 keep-alive 缓存的组件停用时调用。在deactived里面,在里面进行一些善后操作。

    nextTick()

            在下次 DOM 更新循环结束之后执行回调。在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM ,简单理解:数据更新了,在dom渲染完成后调用该函数。

            注意:在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。

    展开全文
  • 知识点 splice(index,num) 从哪个索引开始,移除几个值 fieldset是一种框架标签,如下图所示,legend必须写在fieldset中 ...案例主要是代码的模块化封装,当前案例写数据缓存 每次载入的数据一刷新就没有了...
  • 随着对 vue 的不断了解,会越来越发现它生命周期的重要性,只有了解了它的生命周期,才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件,即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从...
  • 由父页面和子组件生命周期引起,但是不影响功能使用,F12出现莫名报错的问题
  • vue组件生命周期和执行过程

    千次阅读 2020-12-19 22:40:26
    vue组件生命周期和执行过程发布时间:2018-07-23 14:27,浏览次数:896, 标签:vueVue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来...
  • vue2的生命周期

    千次阅读 2022-04-22 16:15:03
    三、项目开发中 在生命周期里都做过什么功能四、页面第一次加载时 父组件生命周期执行的顺序是什么 一、什么是vue的生命周期 vue生命周期是指vue实例从创建到销毁的过程 我们可以在生命周期的不同阶段 调用不同的...
  • 本文讲解了vue生命周期,父子组件涉及的生命周期过程以及created和mouted钩子的区别
  • 生命周期:父组件嵌套子组件的生命周期执行顺序 ...缓存组件生命周期触发的顺序 // 没有缓存,动态组件的实现 <component :is="currentCpn" /> // 有缓存,缓存组件的实现 <div id="app"> <keep-aliv
  • vue组件生命周期

    2019-12-01 22:11:26
    在使用Vue的过程中需要频繁的创建和销毁组件 比如页面部分内容的显示与隐藏,但是用的是v-if 可以使用组件缓存缓存页面上的组件,防止频繁的创建和销毁组件 内置组件中 被其包裹的组件,在v-if=false的时候,...
  • 文章目录【vue生命周期(包含父子组件)一、vue生命周期方法二、keep-alive 中的生命周期三、Vue组件和父组件执行顺序四、created和mounted的区别五、异步请求在哪一步发起?六、在什么阶段才能访问操作DOM? ...
  • 给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed 结束! 补充知识:vuex actions正确使用vue-resource的方式( Error in mounted hook: “TypeError: Cannot read property ...
  • 1、vue生命周期生命周期钩子 vue生命周期总共分为8个阶段: 创建前/后,载入前/后,更新前/后, 销毁前/后。 beforeCreate(创建前):vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化 ...
  • vue父子组件生命周期 vue实例被创建要经过一系列初始化过程,例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等,在这个过程中,会运行一些叫做生命周期钩子的函数,可以让用户在...
  • 在分析父子组件生命周期之前,我们先核实一次两个路由(不包含子组件)之间切换,其生命周期的执行顺序! 在这用到两个路由,新闻路由和top路由(名字只做区分,没有其他含义) 1、首先切换到新闻路由 执行...
  • 生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeRouteEnter beforeRouteLeave activated deactivated beforeDestroy destroyed 一、 组件间函数...
  • 单个组件生命周期现根据实际代码执行情况分析:单组件更新{{dataVar}}销毁exportdefault{data(){return{dataVar:1}},beforeCreate(){this.compName='single'console.log(`--${this.compName}--beforeCreate`)},...
  • 在单一组件中,钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed,但当父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数,这些父子组件的这些钩子是如何交融执行,且执行...
  • 先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命...
  • Vue 中的组件缓存

    千次阅读 2021-07-24 11:24:11
    一、介绍 先来看一个问题?...使用 keep-alive 缓存组件 官方文档:在动态组件上使用 keep-alive 主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
  • vue组件生命周期

    2019-04-26 16:09:39
    vue组件生命周期 需要频繁的创建和销毁组件 比如页面中部分内容显示与隐藏,但是用的是v-if 组件缓存 内置组件中 被其包裹的组件,在v-if=false的时候,不会销毁,而是停用 v-if=“true” 不会创建,而是激活 ...
  • Vue 3 生命周期完整指南

    万次阅读 2021-03-31 08:28:34
    highlight: a11y-dark theme: condensed-night-purple 作者:Michael Thiessen 译者:前端小智 来源:news 点赞再看,微信搜索**【大迁世界】,B站...最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,.
  • 缓存组件 keep-alive 缓存标签...2.只有在缓存组件才会出现缓存组件生命周期钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
  • vue中的生命周期(钩子函数)

    千次阅读 2022-01-28 10:06:41
    vue中的生命周期(钩子函数) ** 下图是整个vue生命周期 生命周期共有八个钩子函数 生命周期vue是一个构造函数,执行这个函数的时候,即相当于实例化了这个函数,因此我们在创建实力的过程中为了更近一步的...
  • 晚上好。今天讲vue中的组件缓存
  • Vue学习——生命周期钩子、路由 一、生命周期钩子函数 所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如...
  • Vue组件生命周期

    2021-09-16 14:52:15
    是由vue框架提供的内置函数,会伴随着组件生命周期自动按次序执行 组件创建阶段(创建前,创建后,渲染前,渲染后) - befoCreate之前:props,data,method都不可用 - created:可用数据(在这个阶段发起...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,143
精华内容 6,457
关键字:

vue缓存组件生命周期