实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：



<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            new Vue({

                el:'#box',

                data:{

                    msg:'welcome'

                },

                created:function(){

                    console.log('实例已经创建,msg变量还未渲染到模板')

                },

                mounted:function(){

                    console.log('已经挂载到模板上:msg变量渲染到模板')

                },

                updated:function(){

                    console.log('实例更新啦')

                },

                destroyed:function(){

                    console.log('销毁啦')

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg"><br/>

        {{msg}}

    </div>

</body>

</html>

官方示意图

Vue2学习笔记:实例生命周期的更多相关文章

  1. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  2. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  3. Java Web学习笔记-Servle生命周期

    Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...

  4. android学习笔记 activity生命周期&任务栈&activity启动模式

    activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...

  5. iOS学习笔记—ViewController/生命周期

    ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图.iOS的SDK中提供很多原生ViewController ...

  6. MVC学习笔记---MVC生命周期

    Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...

  7. MVC学习笔记---MVC生命周期及管道

    ASP.NET和ASP.NET MVC的HttpApplication请求处理管道有共同的部分和不同之处,本系列将体验ASP.NET MVC请求处理管道生命周期的19个关键环节. ①以IIS6.0为例 ...

  8. Android学习笔记_18_Activity生命周期 及 跳转方式

    一.Activity有三个状态: 1.当它在屏幕前台时(位于当前任务堆栈的顶部),它是激活或运行状态.它就是响应用户操作的Activity. 2. 当它上面有另外一个Activity,使它失去了焦点但 ...

  9. AngularJs学习笔记-组件生命周期

    组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...

随机推荐

  1. 解决LNMP环境下WordPress后台缺少”WP-ADMIN”路径

    LNMP一键安装包也是老左比较喜欢使用的环境之一,昨天帮助一个网友搭建LNMP环境后发现登陆WP后台之后点击左侧的菜单发现直接跳转404错误,开始还以为数据库问题,视线朝上一看原来在地址栏中的路径缺少 ...

  2. Mac在终端用命令装载dmg文件

    今天碰到个问题,下载了一个dmg文件,然后双击/右键安装,一点反应都没有.一开始以为是电脑的缘故,重启,依旧没有反应,然后想到用终端装载试试. 打开终端,输入命令: hdiutil attach we ...

  3. pthread和semaphore的简单应用以及四个典型的多线程问题

    pthread和semaphore的简单应用以及四个典型的多线程问题 pthread常用函数简单介绍 创建线程 int  pthread_create(pthread_t  *  thread, pt ...

  4. rpm使用方法

    查看rpm信息:rpm -q [软件的rpm名字]rpm -q下还有很多选项,具体功能如下:rpm -qa                列出所有已安装的RPM文件rpm -qa | grep [rp ...

  5. Python描述符(__get__,__set__,__delete__)简介

    先说定义,这里直接翻译官方英文文档: 一般来说,描述符是具有“绑定行为”的对象属性,该对象的属性访问将会被描述符协议中的方法覆盖.这些方法是__get__(),__set__(),和__delete_ ...

  6. GDI+中发生一般性错误的解决办法（转)

    今天在开发.net引用程序中,需要System.Drawing.Image.Save 创建图片,debug的时候程序一切正常,可是发布到IIS后缺提示出现"GDI+中发生一般性错误" ...

  7. 【C#】组件分享：FormDragger窗体拖拽器

    适用:.net2.0+ winform项目 介绍: 类似QQ.迅雷等讲究UI体验的软件,都支持在窗口内多处地方拖动窗口,而不必老实巴交的去顶部标题栏拖,这个组件就是让winform也能这样随性拖拽,随 ...

  8. EventProxy流程控制

    EventProxy流程控制 EventProxy是一个通过控制事件触发顺序来控制业务流程的工具. 1. 利用事件机制解耦复杂业务逻辑2. 移除被广为诟病的深度callback嵌套问题3. 将串行等待 ...

  9. SpringBoot+Mybatis整合入门（一）

    SpringBoot+Mybatis 四步整合 第一步 添加依赖 springBoot+Mybatis相关依赖 <!--springBoot相关--> <parent> < ...

  10. Golang beego ORM + CRUP 操作详解

      构建beego Web 项目         首先构建一个beego 的web 项目,这个我们完全可以参考beego 官网中的开发文档,上面介绍的非常的详细,在这我就不给大家介绍,主要是介绍ORM ...