实例生命周期

每个 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. Go 提高性能的特性

    1.值的高效处理和存储,允许创建紧凑的数据结构,避免不必要的填充字节.紧凑的数据结构能更好地利用缓存.更好的缓存利用率可带来更好的性能. 2.函数的调用有开销,减少函数调用开销的解决方案是内联.简单的 ...

  2. 不会几个框架，都不好意思说搞过前端： React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  3. Java8新特性--流(Stream)

    1.简介      Java 8是Java自Java 5(发布于2004年)之后的最重要的版本.这个版本包含语言.编译器.库.工具和JVM等方面的十多个新特性.在本文中我们一起来学习引入的一个新特性- ...

  4. 使用 RetroShare 分享资源

    本文告诉大家如何使用 RetroShare 来分享资源.因为 RetroShare 是一个 p2p 分享的工具,所以他比现在很多云盘都好用,在网上,很多大神说可以用来代替电驴.之所以推荐这个软件,因为 ...

  5. SSH框架搭建步骤总结以及Hibernate二级缓存，查询缓存

    二级缓存.查询缓存 一级缓存: 默认启动,生命周期是和session同步的,session独享 二级缓存: 需要加载配置信息,生命周期是和应用服务器同步,session共享 1:在hibernate. ...

  6. jquery select change下拉框选项变化判断选中值

    <th class="formTitle"> 是否转出: </th> <td class="formValue" colspan= ...

  7. 在SQLSERVER中如何检测一个字符串中是否包含另一个字符串

    --当charindex返回值大于0时则包含 为0不包含 select CHARINDEX('456','123456')   SQL语句使用CHARINDEX函数,来测试一个字符串中是否包含另一个字 ...

  8. C# 学习笔记（二） 时间格式化字符串

    1. 以下4种时间格式化符号输出的固定时间格式在各个区域设置中都应是相同的: 标准格式字符串 由 DateTimeFormatInfo.InvariantInfo 属性定义 自定义格式字符串 “O”或 ...

  9. Mybatis源码正确打开方式

    精心挑选要阅读的源码项目: 饮水思源——官方文档,先看文档再看源码: 下载源码,安装到本地,保证能编译运行: 从宏观到微观,从整体到细节: 找到入口,抓主放次,梳理核心流程: 源码调试,找到核心数据结 ...

  10. 小tip:巧用CSS3属性作为CSS hack——张鑫旭

    一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...