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. Linux系统学习之 二：新手必须掌握的Linux命令2

    2018-10-03 22:20:48 一.文件目录管理命令 1.touch 命令 用于创建空白文件或设置文件的时间,格式为“touch [选项] [文件]”. 参数: -a :仅修改“读取时间(at ...

  2. Git 基础教程 之 解决合并冲突

    ①  解决冲突 把Git合并失败的文件手动编辑成我们希望的内容 ②  提交,合并完成 场景: ①  新分支feature1,修改后,add, commit: ②  切回master后,修改后,add, ...

  3. 0208如何利用federated配置远程的数据库和本地数据相互交互

    -- 第一步修改本地数据库的配置文件,让其支持federated存储引擎,在[mysqld]配置文件下面增加federated[注意不能写成大写]-- federated -- 第二步创建一个数据库, ...

  4. [bzoj3062][Usaco13Feb]Taxi_贪心

    Taxi bzoj-3062 Usaco13Feb 题目大意:有n个奶牛想坐出租车.第i头奶牛在起点a[i]等候,想坐出租车到b[i].Bessie从0出车,车上只能坐一头奶牛.她必须完成所有奶牛的要 ...

  5. oc21--super

    // // Phone.h #import <Foundation/Foundation.h> typedef enum { kFlahlightStatusOpen, kFlahligh ...

  6. linux logo的格式【转】

    本文转载自:http://blog.csdn.net/xiayu98020214/article/details/7394100 =================================== ...

  7. Intel 的 MKL是可以用来训练的——官方的实验也提到了训练

    TensorFlow如何充分使用所有CPU核数,提高TensorFlow的CPU使用率,以及Intel的MKL加速 转载 2017年09月07日 16:34:58 标签: cpu / gpu   转载 ...

  8. hdoj--1045--Fire Net（二分图）

    Fire Net Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  9. 【SDOI 2008】 仪仗队

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2190 [算法] 同POJ3090 值得注意的是此题数据规模较大,建议使用用线性筛筛出 ...

  10. Hdu-5983 2016ACM/ICPC亚洲区青岛站 B.Pocket Cube 模拟

    题面 题意:给你一个2*2的魔方,给你每个面每个小块的颜色,一共24个,然后问你能否在一步之内还原. 题解:手动在纸上画,推出每种变化对应的置换,显然,一共有6种,而且可以当成3种,(具体哪3种,就是 ...