精华内容
下载资源
问答
  • 如下转自Vue官网:https://cn.vuejs.org/ activated 类型:func 触发时机:keep-alive组件激活时使用; deactivated 类型:func 触发时机:keep-alive组件停用时调用;

    如下转自Vue官网:https://cn.vuejs.org/v2/api/#activated
    activated
    类型:Function

    keep-alive 组件激活时调用。
    该钩子在服务器端渲染期间不被调用。

    deactivated
    类型:Function

    详细:

    keep-alive 组件停用时调用。

    该钩子在服务器端渲染期间不被调用。

    keep-alive激活状态

        <keep-alive>
          <router-view />
        </keep-alive>
    

    keep-alive未激活状态

    <keep-alive>
       <div>
         <router-view />
       </div>
    </keep-alive>
    

    keep-alive仅支持第一个元素,单节点激活

    展开全文
  • activated钩子函数

    2019-07-09 10:22:00
    activated钩子函数是在组件被激活后的钩子函数,mounted是不保证组件在document中,也就是组件还没有被激活,因此可以理解为activated执行在mounted之后。 在跳转传值时,接收参数的页面中可能获取不到第二次传的值...

    activated钩子函数是在组件被激活后的钩子函数,mounted是不保证组件在document中,也就是组件还没有被激活,因此可以理解为activated执行在mounted之后。

    在跳转传值时,接收参数的页面中可能获取不到第二次传的值,放在activated中,可以获取到值的变化。

    vue2.0中常用的钩子函数有:

    beforeCreated:组件实例刚被创建,组件属性计算之前,如data等;

    created:组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在;

    beforeMount: 编译/挂载之前;

    mounted: 编译/挂载之后(不保证组件已在document中);

    beforeUpdate: 组件更新前;

    updated: 组件更新后;

    activated: 组件被激活时调用;

    deActivated: 组件被移除时调用;

    beforeDestory: 组件被销毁之前;

    destoryed: 组件被销毁之后。

     

    转载于:https://www.cnblogs.com/lesliejavascript/p/11155742.html

    展开全文
  • Vue的生命周期钩子函数activated

    万次阅读 2018-09-08 21:10:39
    Vue的生命周期钩子函数activated activated 生命周期在keep-alive 组件激活时调用 服务器端渲染期间不调用该生命周期 通常和deactivated周期一起使用 以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏...

    Vue的生命周期钩子函数之activated

    • activated 生命周期在keep-alive 组件激活时调用
    • 服务器端渲染期间不调用该生命周期
    • 通常和deactivated周期一起使用

    以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏效果

    html代码块

        <div id="singleBanner">
        <!-- 顶部悬浮窗效果 -->
          <div id="surperficial" v-if="show">
              <router-link to="/" class="backBtn"><Icon type="ios-arrow-back" id="leftIcon" />
              </router-link>        
              <span>天津方特欢乐世界</span>
          </div>
           <!--  图片部分 -->
            <div class="introPic">
                <router-link to="/" tag="div" class="backBtn"><Icon type="ios-arrow-dropleft-circle" id="backIcon" /></router-link>
                <div class="picNum"><Icon type="md-images" color="white" id="imgIcon"/><span>{{picNum}}</span></div>
                <div class="picTitle">
                    <span class="left">天津方特欢乐世界</span>
                    <span class="right">视频<Icon type="ios-arrow-forward" id="backBtn" /></span>
                </div>
            </div>
            <div class="introText">
                <div class="introTextTop">
                    <ul>
                        <li>
                            <p class="text-l"><span class="score">{{score}}</span><span class="level">超赞</span></p>
                            <p class="text-r"><span class="comment">{{commNum}}条评论</span><span class="maker">{{makerNum}}条攻略</span></p>
                            <Icon type="ios-arrow-forward" class="moreBtn" />
    
                        </li>
                        <li>
                            <p class="text-l"><span class="sightintro">景点简介</span></p>
                            <p class="text-r"><span class="comment">开放时间、 贴士</span></p>
                            <Icon type="ios-arrow-forward" class="moreBtn" />
    
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="introTextBottom">
                    <Icon type="ios-pin-outline" id="locationIcon" />
                    <span class="content">天津市滨海新区新生态城中生大道北首生态岛内</span>
                    <Icon type="ios-arrow-forward" id="moreIcon" />
                </div>
                <div class="introTextWarn">
                     <Icon type="ios-megaphone" id="messPhone"/>
                     <span class="warn_con">如因天气原因、设备检修等造成部分项目暂缓</span>
                     <Icon type="ios-arrow-forward" id="moreMess" />
                </div>
            </div>
        </div>
    </template>

    script代码块

    <script>
    export default({
         name:'singleBanner',
         data:function(){
            return{
                picNum:57,
                score:"5.0",
                commNum:6696,
                makerNum:1,
                show:false,
                opacity:{opacity:0}
            }
         },
         methods:{
            scrollChange:function(){
                //console.log("move move move");
                let top=document.documentElement.scrollTop;
                //console.log(top);
                if(top==0){
                    this.show=false;
                }else{
                    this.show=true;
                }
            }
    
         },
         mounted:function(){
    
         },
         activated:function(){
              window.addEventListener('scroll',this.scrollChange);//当从缓存中调取数据时触发该生命周期函数
         },
        deactivated:function(){
             window.removeEventListener('scroll',this.scrollChange);
         }
    
    })  
    </script>

    styley样式

    <style lang="less" scoped>
    @import '~style/common.less';//引入外部样式
    #singleBanner{
        position:relative;
        #surperficial{
            position: fixed;
            .w(375);
            .h(44);
            .l-h(44);
            text-align:left;
            background: #00bcd4;
            .top(0);
            z-index: 100;
            #leftIcon{
                .fs(20);
                 color:white;
            }
            span{
                .fs(18);
                .marginLeft(75);
                 color:white;
            }
        }
        .introPic{
            .w(375);
            .h(206);
            background: url('http://img1.qunarzz.com/sight/p0/1711/f6/f6fe49bdcbb82882a3.water.jpg_600x330_adb21e76.jpg') center center;
            background-size: cover;
            .backBtn{
                text-align: left;
                #backIcon{
                .fs(40);
                opacity: 0.8;
               }
             }
          .picNum{
            .w(60);
            .h(20);
            .l-h(20);
            background:rgba(0,0,0,.5);
            .b-r(10);
            color:white;
           .marginLeft(12);
           .marginTop(110);
           #imgIcon{
            .fs(16);
            vertical-align: middle;
            .marginRight(4);
            .marginTop(-2);
           }
          }
          .picTitle{
            .w(375);
            .h(20);
            .l-h(20);
            .fs(18);
            color:white;
            text-align: left;
            .marginTop(6);
            .left{
                .marginLeft(6);
            }
            .right{
                .marginLeft(160);
                #backBtn{
                    .fs(22);
                }
            }
          }  
       }
        .introText{
            .w(375);
            .h(168);
            border: 1px solid white;
            /* background: white; */
            .introTextTop{
                list-style: none;
                .fs(0);
                .marginTop(8);
                 ul{
                    .w(375);
                    .h(44);
                    background: white;
                    list-style: none;
                    li{
                    .w(177);
                    .h(44);
                    .fs(12);
                    .paddingLeft(4);
                    float: left;
                    background:white;
                    border-left: 1px solid #f5f5f5;
                    color:black;
                    position:relative;
                    text-align: left;
                    .text-l{
                        color:#f60;
                        .fs(14);
                        .score{
                            .fs(18);
                        }
                        .level{
                            .marginLeft(10);
                        }
                        .sightintro{
                            color:black;
                            .fs(16);
                        }
                    }
                    .text-r{
                        color:#999;
                        /* .marginBottom(8); */
                        .maker{
                            .marginLeft(10);
                        }
                    }
                    .moreBtn{
                        position:absolute;
                        .top(10);
                        .right(4);
                        .fs(18);
                        color:#999;
                    }
                }
                 }
    
            }
            .introTextBottom{
                .w(375);
                .h(55);
                .l-h(55);
                .fs(14);
                text-align: left;
                background:white;
                border-top:0.6px solid #eee;
                #locationIcon{
                    .fs(16);
                    .marginLeft(4); 
                }
                #moreIcon{
                    .fs(16);
                    .marginLeft(12);
                    color:#999;
                }
            }
            .introTextWarn{
                .w(375);
                .h(55);
                .marginTop(4);
                .l-h(55);
                .fs(14);
                text-align: left;
                background:rgb(255,245,229);
                color:#f60;
                #messPhone{
                    .fs(16);
                    color:#f60;
                    .marginLeft(4);
                }
                #moreMess{
                    .fs(16);
                    .marginLeft(28);
                    color:#999;
                }
            }
        }
    
    .clearfix{
        clear:both;
    }    
    }
    </style>
    展开全文
  • 数据驱动使页面刷新:更新前和更新后的钩子函数 activated和deactivated配合keep-alive使用:上次离开组件,组件驻留内存,再次返回,会自动渲染上次的记录

    数据驱动使页面刷新:更新前和更新后的钩子函数

     

    • activated和deactivated配合keep-alive使用:上次离开组件,组件驻留内存,再次返回,会自动渲染上次的记录

     

    展开全文
  • 在这里插入代码片 <template> <div class="main" ref="main"> <!-- vue-baidu-map ... 钩子函数 --> </div> </template> <script> export default {
  • 缓存组件的生命周期钩子函数 activated激活时状态 deactivated 失活时状态 注意: 1.使用keep-alive包裹的组件就是缓存组件 2.只有在缓存组件才会出现缓存组件的生命周期钩子函数 <!DOCTYPE html> <...
  • 但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次 mounted(): 是挂载vue实例后的钩子函数,钩子在主页挂载时执行一次,...activated(): 是组件被激活后的钩子函数,钩子则...
  • 首次进入该路由的页面时会触发created,mounted,activated钩子函数,但使用this. r o u t e r . g o ( − 1 ) 返 回 该 路 由 的 时 候 , 不 会 触 发 c r e a t e d 和 m o u n t e d , 只 会 触 发 a c t i v...
  • vue 钩子函数

    2020-06-27 20:15:09
    beforeRouteEnter 方法名称: ...next调用时机: activated 之后 注意事项: this == undefined beforeRouteEnter(to, from, next) { // alert('beforeRouteEnter') next(vm =>{  // alert('be...
  •  1.activated生命周期钩子函数在keep-alive 组件激活时调用,该钩子在服务器端渲染期间不被调用。  2.deactivated生命周期钩子函数在keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。  3.vue...
  • vue常用钩子函数

    2021-04-20 19:55:50
    1、在keep-alive包裹的活性组件中,加入了activated(),用法和created()、mounted()用法相同,区别是在活性组件中,第一次进入页面时按照created()=>mounted()=>activated()触发,第二次之后只会触发activated...
  • 近期做vue的缓存等,路由比较复杂,认识了几个新的钩子函数,在此记录下 生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeRouteEnter beforeRouteLeave activated deactivated ...
  • 在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的。 vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后、创建之前执行 created //实例创建后执行...
  • vue各大生命周期钩子函数 先了解各大钩子函数,当然接下来我还会在其中参杂一下组件的属性执行时机。深入了解vue整体的执行。 beforeCreate created beforeMounted mounted beforeUpdate updated activated ----...
  • vue 生命周期钩子函数

    2019-10-05 13:59:28
    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mounted:挂载之后,即data中的数值已经被渲染到元素中...
  • 关于vue中的keep-alive的两个钩子函数

    千次阅读 2020-07-15 14:40:25
    activated 类型:func 触发时机:keep-alive组件激活时使用; deactivated ...这两个钩子函数在普通的组件当中是不存在的,只有当组件被keep-alive缓存的时候才会有。可以用来解决再次进入页面的触发。 ...
  • 本人近日做前端的后台管理系统项目,一个问题一直都没解决,就是页面中查看详情按钮第一... activated 可以使用这个钩子函数 以下为具体分析: html 部分 &lt;template&gt; &lt;div class="...
  • 一、回顾vue中的生命周期 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed activated ...
  • 组件相关钩子函数: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed还有两个特殊的(使用keep-alive):activated、deactivated(不详述)v2.5.0+新增: ...
  • 在使用vue.js进行开发时,使用最多的就是created、... 当引入keep-alive时,页面第一次进入,钩子的触发顺序是created-> mounted-> activated。当再次进入该页面时,只触发activated。  因此,应该activat...
  • 一、问题描述 目前在做一个电商项目,在商品列表list点击item商品的查看详情按钮时,首次进入详情页,页面会进行渲染,钩子会走mounted,但回退之后,再点击...将钩子mounted的操作放入钩子activated,问题解决~~ ...
  • vue的keep-alive和生命周期钩子函数

    千次阅读 2019-07-24 17:50:20
    当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。 2.基本用法 可以将 是否包裹 keep-...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 171
精华内容 68
关键字:

钩子函数activated