重绘重排 中重复出现的是

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. Spring的事务机制

    ---恢复内容开始--- 内定的=>(只需要在xml 中添加一个bean) 在xml 中添加 <bean id="listener" class="com.t ...

  2. 第八节：常见安全隐患和传统的基于Session和Token的安全校验

    一. 常见的安全隐患  1. SQL注入 常见的案例: String query = "SELECT * FROM T_User WHERE userID='" + Request ...

  3. Node.js实战项目学习系列(1) 初识Node.js

    前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...

  4. [物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.1 媒质中的 Maxwell 方程组

    1.媒质的极化 (1) 束缚电荷: 被束缚在原来位置上的电荷. (2) 在电磁场中, 束缚电荷会有一微小的运动, 而产生电偶极矩. 此即称为媒质的极化. (3) 设电极化强度 (单位体积的电偶极矩) ...

  5. requests session operation

    # encoding:utf-8# baseic usage of requests.sessionsimport requestsfrom requests import sessions r = ...

  6. Linux之搭建远程数据库[Ubuntu：全过程]

    1.mariadb在Linux中首次进入mysql (因为此时还没有创建任何用户,mysql的root并不等效于linux中的root用户) sudo apt-get install mysql-se ...

  7. centos7安装notepadqq

    这是在centos7 上发表的第一篇博文 对linux系统陌生,折腾了一天,安装好了搜狗输入法.相关文章也不少,但照着一步一步来,都没有成功.最后照着这篇弄成了: ****** 安装notepadd+ ...

  8. windows下nginx的简单使用

    在网上是可以查得到关于nginx的一些使用,每次要用的时候都会去查一下别人的用法.既然自己用到的频率会比较高,那何不自己做个小小的笔记呢. 我使用的是windows版nginx-1.14.0,版本对命 ...

  9. Redis和memcahce的区别【转】

    先给大家讲一个基本知识点:数据库分类大致分为两类,关系型数据库和非关系型数据库.如果详细区分的话,还可以继续分下去. Redis不仅仅是缓存数据库 面试的时候,很多人会问,Redis和memcahce ...

  10. $(document).ready()和onload() html渲染时的区别

    不谈调用次数,加载先后问题,只看渲染时区别 1.都在数据绑定完加载. 2.ready可以有多个,且都执行,onload虽可以写多个,但是只执行最后一个. 3. $.ready = function ( ...