重绘重排 中重复出现的是

mounted(){...}

beforeUpdate(){...}

uptated(){...}

其他钩子函数只会出现一次

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>viewModel 的生命周期</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
    <div id="test">
    <button type="button" @click="destroyVue">卸载 viewModel</button>
    <p v-show="isShow">生当作人杰,死亦为鬼雄。</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
    new Vue({
    el: "#test",
    data:{
    isShow: true
    },
    methods:{
    destroyVue(){
    this.$destroy();
    }
    },
    mounted(){ // 初始显示之后立即执行: 执行异步任务
    this.timerId = window.setInterval(()=>{
    console.log("27 ---- mounted");
    this.isShow = !this.isShow
    }, 1000)
    },
    beforeDestroy(){
    console.log("32 ---- beforeDestroy");
    window.clearInterval(this.timerId)
    },
    /****************************************************************************/
    beforeCreate(){
    console.log("36 beforeCreate")
    },
    created(){
    console.log("40 createdcreated")
    },
    beforeMount(){
    console.log("42 beforeMount")
    },
    beforeUpdate(){
    console.log("46 beforeUpdate")
    },
    updated(){
    console.log("49 updated")
    },
    destroyed(){
    console.log("52 destoryed")
    }
    })
    </script>
    </body>
    </html>

vue_实例_组件的生命周期的更多相关文章

  1. ReactJS入门(二)—— 组件的生命周期

    如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...

  2. react.js 从零开始(二)组件的生命周期

    什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...

  3. react 组件的生命周期

    组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...

  4. ReactJS入门3:组件的生命周期

    本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM     在本阶段,主要有三个方法: 1 ...

  5. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  6. React组件和生命周期简介

        React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...

  7. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  8. Autofac容器对象实例的几种生命周期类型

    实例范围决定了如何在同一服务的请求之间共享实例. 请注意,您应该熟悉生命周期范围的概念,以便更好地理解此处发生的情况. 当请求服务时,Autofac可以返回单个实例(单实例作用域),新实例(每个依赖作 ...

  9. React:组件的生命周期

    在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...

随机推荐

  1. Windows Server 在IIS上创建安全网站

    第一步.打开服务器管理器,创建用户,并设置密码,自己记录下来,注意勾选密码永不过期. 第二步.设置用户隶属组:IIS_IUSRS. 第三步.设置建立的网站文件夹权限,添加刚才建立的用户,并添加修改.读 ...

  2. 使用ZooKeeper协调多台Web Server的定时任务处理(方案1)

    背景说明: 有一套Web服务程序, 为了保证HA, 需要在多台服务器上部署, 该服务程序有一些定时任务要执行, 现在要保证的是, 同一定时任务不会在多台机器上被同时执行. 方案1 --- 任务级的主备 ...

  3. 网站设置ico图标

    1.用设计的png图片去在线图标网站上生成一个16*16大小的图标,命名favcon.ico放置到网站根目录下如:http://www.faviconico.org/favicon2.添加代码 < ...

  4. [Luogu P3295][SCOI 2016]萌萌哒

    先说下暴力做法,如果[l1,r1]和[l2,r2]子串相等等价于两个区间内每个数对应相等.那么可以用并查集暴力维护,把对应相等的数的位置维护到同一个集合里去,最后答案其实就是把每个集合可以放的数个数乘 ...

  5. [物理学与PDEs]第3章第5节 一维磁流体力学方程组 5.2 一维磁流体力学方程组的 Lagrange 形式

    由 $$\bex \cfrac{\p \rho}{\p t}&+u_1\cfrac{\p \rho}{\p x}+\rho\cfrac{\p u_1}{\p x}=0, \eex$$ 我们可以 ...

  6. mysql常见的问题

    1.为什么选择某一个版本 各个版本之间的区别及优缺点 首先,服务器特性 mysql percona mysql mariaDB 开源 开源 开源 支持分区表 支持分区表 支持分区表 innodb Xt ...

  7. excel转换为TXT文本

    #_*_ coding:utf-8 _*_#author:yr import xlrd data = xlrd.open_workbook(r"C:\Users\yangr\Desktop\ ...

  8. 四十四、Linux 线程——线程同步之死锁以及线程和信号

    44.1 死锁 死锁: 两个线程试图同时占有两个资源,并按不同的次序锁定相应的共享资源 解决方式: 按相同的次序锁定相应的共享资源 使用函数 pthread_mutex_trylock(),它是函数 ...

  9. 一个QQ旋风的BUG

    本人喜欢用QQ旋风下载工具,很不幸的是这个工具BUG太多了. 下载不同COOKIE,相同文件名.URL的文件时候会QQ旋风崩溃. 感兴趣可以试下.

  10. JMX的l理解

    一.JMX的一些定义与用途 Java Management Extensions:Java管理扩展,是管理系统和资源之间的一个接口,它定义了管理系统和资源之间交互的标准. 1.专门管理,监控jvm的一 ...