1、vue2生命周期

每个 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>

2、js生命周期

onbeforeunload:

　　事件在即将离开当前页面（刷新或者关闭）时触发。改事件可用于提醒用户是继续浏览网页还是离开当前页面。

页面加载是只执行 onload 。

页面关闭时先执行 onbeforeunload ，最后 onunload。

页面刷新时先执行 onbeforeunload，然后 onunload，最后 onload。

Vue2:实例生命周期、js生命周期的更多相关文章

  1. 简简单单的Vue2（简单语法，生命周期，组件）

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...

  2. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

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

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

  4. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  5. 2.Git基础-仓库的获取方式与Git文件的状态变化周期（生命周期）

    1.仓库的获取 Git仓库的获取有两种方式: 1.从现有目录或者是项目中导入所有文件到Git中. 2.从一个服务器clone一个现有的Git仓库. 如果使用第一种方式,只需要在你希望被Git进行管理的 ...

  6. 时钟周期、振荡周期、机器周期、CPU周期、状态周期、指令周期、总线周期、任务周期

    http://blog.csdn.net/yangtalent1206/article/details/5853017 计算机系统有一系列的“周期”概念,区别.联系地理解这些概念至关重要.以下对时钟周 ...

  7. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （六） 自动化测试结构小节

    上一篇‘e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (五) 如何让窗体记录登录 ...

  8. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （四） Q 反回调

    上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (三) SqlServ ...

  9. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （三） SqlServer数据库的访问

    上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别” ...

随机推荐

  1. BZOJ 1101 Luogu P3455 POI 2007 Zap (莫比乌斯反演+数论分块)

    手动博客搬家: 本文发表于20171216 13:34:20, 原地址https://blog.csdn.net/suncongbo/article/details/78819470 URL: (Lu ...

  2. 一维数组快速转集合(List)

    String[] arr={"qwe","asd","zxc","asddf","hghgf"}; ...

  3. 洛谷 P1129 BZOJ 1059 cogs 660 [ZJOI2007]矩阵游戏

    题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作: 行交 ...

  4. ExtJs之Ext.Model的MemoryProxy

    书上的代码已完全不可参考,只好按知识点从网上查资料一个一个实例 了. <!DOCTYPE html> <html> <head> <title>ExtJ ...

  5. [bzoj1212][HNOI2004]L语言_AC自动机_动态规划

    L语言 bzoj-1212 HNOI-2004 题目大意:给你一个n个单词的集合,然后给你m条字符串.问每条字符串可以被理解的最长前缀.被理解当且仅当存在一种分割使得每一段都是集合里的元素. 注释:$ ...

  6. POJ 2029

    二维树状数组可解此题 #include <iostream> #include <cstdio> #include <cstring> #include <a ...

  7. SVNserver搭建和使用（二）

    上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下怎样使用VisualSVN Server建立版本号库,以及TortoiseSVN的使用. 首先打开V ...

  8. 编程算法 - 把字符串转换为整数 代码(C)

    把字符串转换为整数 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 写一个函数StrToInt, 模拟atoi的功能, 把字符串转换为整数. 须 ...

  9. luogu1896 [SCOI2005]互不侵犯 状压DP

    题目大意 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子.( 1 <=N <=9, 0 ...

  10. luogu1908 逆序对 树状数组

    题目大意:对于给定的一段正整数序列,逆序对就是序列中ai>aj且i<j的有序对.求一段序列的逆序对数. 对于一个数组T,其一个点的值为值与该点下标相等的A序列中点的个数.对T维护一个树状数 ...