三个阶段:

一.初始化显示;

二:更新显示

三.死亡

每一个阶段都对应生命周期的回调函数(也叫勾子函数)

生命周期图示:

1.

2.test013.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.vue对象生命周期
    1)初始化显示
        beforeCreate()
        created()
        beforeMount(}
        mounted()
    2)更新显示 this.xxx=value
        beforeUpdate()
        updated()
    3)销毁vue实例:vm.$destory()
        beforeDestory()
        destory()
2.常用的生命周期方法
    created()/mounted():发送ajax请求,启动定时器等异步任务
    beforeDestory():做收尾工作,如:清除定时器
-->
<div id="test" >
    <button @click="destroyVM">destroy vm</button>
    <!--v-show显示与隐藏-->
    <p v-show="isShow">赵子龙:吾乃常山赵子龙也!!!</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#test',
        data:{
            //每隔一秒钟这个值isShow:true改变一下
            //想到技术:循环定时器
            isShow:true
        },

        //1.初始化阶段
        //测试beforeCreate()
        beforeCreate(){
            console.log('beforeCreate()')
        },

        //测试create()
        created(){
            console.log('created()')
        },

        //测试beforeMount
        beforeMount(){
            console.log(beforeMount())
        },

        //重点
        mounted(){//初始化显示之后立即调用(1次)
            console.log('mounted()')
            //设置定时器
            //需要beforeDestory()方法看得见this.intervalId
            this.intervalId=setInterval(()=>{
                console.log('-----------------------')
                //setInterval(function(){
                // this有问题,this希望是当前的vm,但是当前是window;所以要写箭头函数
                //记住:一旦将一个回调函数当做参数传递,就要将回调函数写成箭头函数;
                //因为箭头函数就是用来定义匿名函数的,但箭头函数的特点就是:函数内部没有自己的this,没有就用外部的this,外部的就是vm对象
                this.isShow=!this.isShow
            },1000)
        },

        //2.更新阶段
        beforeUpdate(){
            console.log('beforeUpdate()')
        },

        //测试updated()
        updated(){
            console.log('updated()')
        },

        //3.死亡阶段
        //生命周期回调函数
    //重点
        beforeDestroy(){ //死亡之前调用(1次)
            //清除定时器
            clearInterval(this.intervalId)
        },
        destroyed(){
            console.log('destroyed()')
        },

    methods:{
        destroyVM(){
            //干掉vm
            //观察控制台console发现定时器还在运行,出现了内存泄漏
            //需要清除定时周期
            this.$destroy()
        }
    }
    })
</script>
</body>
</html>

(尚013)Vue的生命周期的更多相关文章

  1. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  2. 如何解释vue的生命周期才能令面试官满意？

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  3. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  4. vue的生命周期的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  5. vue笔记-生命周期

    生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. vue 关于生命周期

    序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...

  7. Vue：生命周期

    一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...

  8. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  9. 深入理解Vue的生命周期

    谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...

随机推荐

  1. [洛谷P5367]【模板】康托展开

    题目大意:给定一个$n$的排列,求它在$n$的全排列中的名次 题解:康托展开,对于一个全排列,第$i$为有$n+1-i$种选择,用变进制数表示,这一位就是$n+1-i$进制.记排列中第$[1,i)$中 ...

  2. swagger 报错：illegal defaultValue null for param type integer

    swagger(版本2.9.2) 刷新报错,错误信息如下图: 问题原因: 根据上面这句报错信息,点进去AbstractSerializableParameter.java:412可以看到 源码, @J ...

  3. Java JDK1.8源码学习之路 1 Object

    写在最前 对于一个合格的后端程序员来说,现行的流行框架早已经能胜任基本的企业开发,Springboot 任何的框架都把重复的工作更佳简单/优化的解决掉,但是完全陷入在这样的温水里面, 好比温水煮青蛙, ...

  4. 基于CentOS6.5的Dubbo及Zookeeper配置

    基于CentOS的Dubbo及Zookeeper配置 需要提前准备好的资料: 1.首先配置java环境 步骤: 将jdk的包上传至centos服务器的/opt目录下,并且解压 tar -zxvf jd ...

  5. vue 项目中assets 和static的区别

    一.Webpacked Assets 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-lo ...

  6. C# vb .net实现不透明度调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的不透明度调整呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  7. Jenkins多环境持续集成架构实践

    自动化部署主要是为了解决项目多.环境多.持续集成慢.部署操作麻烦.手动操作易出错.自动化运维等问题. Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建.部署.自动化 ...

  8. django路由的反向解析

    什么是路由的反向解析 我们的路由都是一个匹配关系,对应一个处理的视图函数, 如果我们的匹配关系发生了变化,那么与之对应的访问地址(可能前端直接url链接, 也可能是后端的redrict跳转)都需要跟着 ...

  9. JavaScript之变量

    var a; // 声明变量a,变量:值可以改变的,相当于数学x,y,z... a=10; // 将10赋值给a var test; var Test; /* 变量命名规则: 1.不能以数字开头 2. ...

  10. 信号的有效值(RMS)估计

    % Root Mean Square Value function [retval] = rms1(sig) N = 20; for k = 1 : length(sig)/N - 1 sig_sum ...