1、在data中声明要设置的定时器名称：

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                timer: null  // 定时器名称
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },复制代码
            

        

    

2、在mounted中创建定时器：

    


        


            


            

        

        


            

                this.timer = (() => {
            

        

    

    


        


            


            

        

        


            

                // 某些操作
            

        

    

    


        


            


            

        

        


            

                }, 5000)复制代码
            

        

    

3、在页面注销时清理定时器：

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                }复制代码
            

        

    

然鹅，并没什么卵用，在切换页面后，定时任务依然顽强的奔跑着。

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                console.log(this.timer)            //输出为: null,但是任务依然在继续运行
            

        

    

    


        


            


            

        

        


            

                }复制代码
            

        

    

可能是我的姿势不对吧。害羞.jpg

经过在各大论坛一番查找发现：

通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器：

    


        


            


            

        

        


            

                const timer = setInterval(() =>{
            

        

    

    


        


            


            

        

        


            

                // 某些定时器操作
            

        

    

    


        


            


            

        

        


            

                }, 5000);
            

        

    

    


        


            


            

        

        


            

                // 通过$once来监听定时器
            

        

    

    


        


            


            

        

        


            

                // 在beforeDestroy钩子触发时清除定时器
            

        

    

    


        


            


            

        

        


            

                this.$once('hook:beforeDestroy', () => {
            

        

    

    


        


            


            

        

        


            

                clearInterval(timer);
            

        

    

    


        


            


            

        

        


            

                }) 复制代码
            

        

    

哇，成功了...

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

resize:none

<textarea style="resize:none " rows="8" cols="80" ></textarea> 


    

        1
    

如果你使用谷歌浏览器或火狐浏览器，你会发现页面上的textarea元素的右下角有个小三角，用鼠标箭头拖拽它，你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾，不包括IE，如果你使用IE，是看不到的。)。Web程序员在设计网页时，一般给了textarea一个固定的长宽，通常是配合布局而设定。但挑剔的用户往往会认为太小或太大。有了这个可以调整大小的工具后，用户就可以自己选择合适的大小了。

但是，有时候是应用的需要，Web程序员需要禁止这个可以调整textarea大小的功能(IE完全没这个问题！)，也就是去掉右下角的小三角，有什么办法呢？很简单，使用CSS的resize属性。

    


        


            


                


                

            

            


                

                    <style type="text/css">
                

            

        

        


            


                


                

            

            


                

                    textarea {
                

            

        

        


            


                


                

            

            


                

                    resize: none;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    </style>
                

            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导语：如今，用户增长越来越难，面对这个情况，本文作者分析了用户增长的两大底层逻辑和两大保障，提出了合格的增长闭环思考和一套切实可行的用户增长方法论。推荐对用户增长感兴趣的童鞋们阅读。

增长越来越重要了！

因为增长越来越难。

我们当初的尝鲜劲头已经过了，各种手机app，装了卸，卸了装，早已找到自己所爱。

产品研发门槛持续降低，各路神仙分分入局，同质化严重，消费者眼花缭乱，一片红海。

这一两年，我一直在做增长，今天分享一些对增长的思考。

一、增长的底层逻辑

增长的底层逻辑到底是啥？

做一次新客户活动，拉动更多的新用户；优化一个注册流程，提升用户注册转化率；通过邀请裂变活动，以老带新的方式，获取新客户。

诸如此类，都是我们常见的获得用户增长的方式。这些增长动作的背后，有什么更深层次的逻辑？

我认为，增长的底层逻辑有两个：精细化、规模化。

1. 精细化：见人说人话，见鬼说鬼话。
2. 用精细化，将存量用户更多地转化。
3. 规模化：一键复制，快速起量

基于精细化经营的能力，用相同的模式，获得更多新用户。

精细和规模，相辅相成，相得益彰，这样才能启动增长飞轮。

二、增长两大保障

没有两大保障，增长只是空中楼阁。

在实施增长的过程中，如果要说什么条件是必不可少。

我认为，这两个至关重要：数据支撑和多元角色。

1. 数据支撑

1. 数据意识建设：强化增长团队的大脑，每一个人都需要加强数据意识；
2. 数据基础建设：增长大盘数据、增长动作效果、增长异动分析，这些最基本的数据，就应该成为基础建设，能够快速获取到；
3. 数据研究方法：具有科学的数据验证方案，AB测试、漏斗分析、聚类模型等。

2. 多元的角色

增长涉及方方面面，包括产品、运营、设计、研发等等，有条件的话，可以组建一个完善的团队；没有足够的资源，增长负责人也应该具备各方面的能力经验。

三、增长闭环

合格的增长闭环思考应该是怎么样的？

着手做增长工作，应该沿着什么样的思路去开展？经过一两年的尝试、总结，下面这条思路，我觉得你可以直接拿去用。

很多人的增长思路是：

用户-问题（需求）-场景-方案-数据

其实这样是不够全面和科学的：

• 缺少了对当前现状的深入剖析；
• 找没有找到当前核心的增长关注点。

个人拙见，增长的闭环思考应该是：

数据-主要矛盾-用户-问题（需求）-场景-方案-数据

• 数据：先通过数据了解当前业务情况，用指标拆解的方式，找出当前增长的潜力空间。具体可以看我之前些的文章《一条公式，掌握10年+产品大牛的管理精髓》。
• 主要矛盾：基于数据，了解当前增长受阻的主要矛盾：是流程转化问题、还是曝光问题、还是产品本身问题。

经过上述的分析，然后才是找到目标用户，将用户的问题转化为需求，在什么样的场景触发给用户，对应的解决方案是什么。

四、增长方法实战

6步可复用的增长实战方法。

从用户生命周期经营角度，我将目标增长的人群划分为：新用户、存量用户、流失用户。下面我将按照这三个纬度，讲一讲具体的增长方法。

1. 新用户

拉新户，是增长最主要的目标人群。

第一步，通过数据了解下当前业务情况。

1）整体情况

每日新增客户趋势图、累计用户数据趋势图、新客户转化人数、新客户转化金额、新客户转化率等等，了解业务大盘情况。

2）主要流量来源

了解整体情况后，接下来需要对流量端进行分析。

新客户主要流量来自那些渠道？自然流量、老带新、活动拉新、专题项目新增等等，把新客户增加的来源划分清楚，看看各个模块的占比和趋势变化情况。

3）转化情况

对上述流量来源，再进一步分析，各个模块转化情况。每天有多少流量进入，有多少新户注册成功，有多少用户成功转化。

完成上述三步，对整体业务情况，有了大致的了解。

第二步，找出最主要的矛盾。

通过公式拆解法：新客户=渠道流量（渠道1+渠道2+…+渠道n）*转化率（渠道1+渠道2+…+渠道n）

通过数据，你可以重点看几个关键点：

1. 哪几个渠道是流量占比比较大的？其中有哪些是转化率比较低的？
2. 哪几个渠道转化率比较高且稳定的？其中哪些是流量不够的？

要想提升新增用户，无非从两个角度突破：1是流量大的，提高转化率；2是转化率高的，提升流量。

找出对应渠道，分析流量不高或者转化率不高的原因，为什么是现在这样的情况？

从多方面找原因（mece法则/金字塔）：是渠道流量不行？还是渠道费用太高？是活动设计页面不行？还是本身用户质量就很差？

各个原因逐一研究，找出主要矛盾。

第三步，分析用户特征。

勾勒用户画像：年龄、性别占比、城市、受教育程度、年收入水平、消费习惯等等，对这些用户有画像有大致的判断后，再从身边的朋友，真实接触了解这一类人群。

第四步，剖析用户的需求。

从已知出发，已有的用户为什么会用平台的产品，他们最关心产品什么样的核心功能、服务？这些用户，是否有渠道上特征的差异？这些用户，新开户7天之内，浏览最多、使用最多的是什么功能及页面？

由此做一轮最基础的推演，新用户也会有类似的关注，再增加渠道上的特征。

第五步，找到用户使用产品的触发场景。

比如，打车平台，一般是用户遇到公共交通工具用不了或者是没有覆盖到的地方或者是用户赶时间。

经常下雨天去坐公交就比较麻烦，很多人会选择打车。一个广告平台，根据天气情况情况，给用户推送打车平台以及打车券，那转化率就会很高。

所以，剖析完用户需求之后，找到触发用户使用平台功能的场景，能更高效率地获取新用户。

第六步，提出解决方案。

通过上面分析了，到了最后一步：解决主要矛盾的具体方案。

如果是转化率不高：那就优化转化路径、转化钩子。

这里的设计是要结合用户需求、用户触发场景进行：需求、触发、行动。

给用户一个行动的理由。

比如电商平台：给福利–新人福利券+限时领取倒计时；

又比如：描述用后效果–盖中盖广告，腰不酸了腿不疼了，一口气上五楼，嘿，不费劲儿～

2. 存量用户&流失用户

存量用户增长关注的是用户往更忠诚的阶层成长；流失用户的增长则是用户回流。

这两个用户人群，做增长的思路跟新户是完全一样。我就不一一阐述了。讲一些不一样的侧重点：

1）存量用户做增长

从两个方面：横向和纵向两条线着手。

横向方面：让用户更多地体验平台上的其他功能，属于业务的交叉经营。

纵向方面：让用户更深度、更高频次地体验平台的核心功能，比如充会员，充更多的钱；用微信支付，用的频次更多。

2）流失用户做增长

用户的回捞思路，可以根据用户历史的行为制定策略。

A 用户历史有体验某个产品/功能：可以用功能更新/产品上新的方式，进行召回用户；

B 用户之前是活动转化的：可以用回归福利礼包的方式，触达用户；

C用户之前没转化，那用户就像是新用户一样，可以参考新户转化的策略做回流。

上述的三个方法，并不是完全固定的，可以交替着使用，分析数据那个有效就用那个。

总结下：本次的分享讲了增长的底层逻辑、两大保障、闭环思考流程以及完整地演绎了新户做增长的分析流程。

每一个模块，都是有不少的门道的，文章仅仅是点到即止。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

import * as echarts from 'echarts'; // 或 const echarts = require('echarts'); 
            


                

                    1
                

                

                    2
                

                

                    3
                

            

简单粗暴 快速解决

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>

 

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：博客园

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>

 

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：博客园

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务