重绘重排 中重复出现的是

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. [物理学与PDEs]第1章第4节 电磁能量和电磁动量, 能量、动量守恒与转化定律 4.3 电磁能量 (动量) 密度, 电磁能量流 (动量流) 密度

    1. 电磁能量密度: $\cfrac{1}{2}\sex{\ve_0E^2+\cfrac{1}{\mu_0}B^2}$. 2. 电磁能量流密度向量: ${\bf S}=\cfrac{1}{\mu_0} ...

  2. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  3. Java反射定义、获取Class三种方法

    反射机制的定义: 在运行状态时(动态的),对于任意一个类,都能够得到这个类的所有属性和方法.  对于任意一个对象,都能够调用它的任意属性和方法. Class类是反射机制的起源,我们得到Class类对象 ...

  4. Subsequence（序列自动机模板题）

    题目链接:https://nanti.jisuanke.com/t/38232 题目大意:给你一个字符串,然后再给你m个字符串,然后问你在第一个字符串中不连续的子串能不能构成输入的子串. 具体思路:构 ...

  5. 高性能JS（读书札记）

    第一章:加载和执行 1.1脚本位置 将js脚本放在body底部 1.2组织脚本 文件合并,减少http请求(打包工具) 1.3无阻塞的脚本 js倾向于阻止浏览器的某些处理过程,如http请求和用户界面 ...

  6. 移动端调用电话、短信、唤起QQ和使用百度地图

    H5能很方便地实现这些功能,都是一句代码搞定 调用电话 <a href="tel:12345678"> 短信 <a href='sms:12345678'> ...

  7. Pytorch 常用函数

    1. torch.renorm(input, p, dim, maxnorm, out=None) → Tensor Returns a tensor where each sub-tensor of ...

  8. Fatal error: cannot initialize AIO sub-system

    在一台服务器中以各数据库的备份文件为数据文件启动多个MySQL实例供SQL Review使用.之前运行一直没有问题(最多的时候有23个MySQL实例同时运行),后来新配置了一台服务器,启动其对应的实例 ...

  9. MS SQL Server 时间函数

    日期和时间数据类型 数据类型 存储(字节) 日期范围 精确度 格式示例 DateTime 8 1753年1月1日 - 9999年12月31日 3 1/3毫秒 yyyy-MM-dd hh:mm:ss.n ...

  10. Java框架之spring框架的优点，为什么要学习spring框架

    为什么要学习Spring的框架a: 方便解耦,简化开发    Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理 b:AOP编程的支持      Spring提供面向切 ...