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. 使用MySQL Migration Toolkit快速导入Oracle数据

    近来笔者有项目需要将原有的Oracle数据库中的数据导入到MySQL中,经过试用发现MySQL GUI Tools中的MySQL Migration Toolkit可以非常方便快捷的将Oracle数据 ...

  2. 0912MySQL 执行计划explain详解

    转自http://blog.itpub.net/29773961/viewspace-1767044/ 该博客内容是比较全的,虽然写的比较晦涩,多读几遍还是不错的 explain命令是查看查询优化器如 ...

  3. redis-windows上的安装与其他命令

    为什么用Redis 数据库的IO是一个性能瓶颈,需要用redis来解决,100个IO并发已经很不错了,因为数据库天生就需要写磁盘,而redis不需要实时写磁盘而又可以存入数据库 安装 以服务的方式启动 ...

  4. sync_binlog=1

    MySQL提供一个sync_binlog参数来控制数据库的binlog刷到磁盘上去. sync_binlog=0,表示MySQL不控制binlog的刷新,由文件系统自己控制它的缓存的刷新.这时候的性能 ...

  5. HDU 3002

    无向图最小割. #include <iostream> #include <cstdio> #include <cstring> using namespace s ...

  6. [Angular] Angular CDK Intro

    1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2 ...

  7. 推断一个点是否在某个区域内。百度，高德，腾讯都能用。（php版）

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  8. 【Oracle】RAC删除节点

    环境: OS:OEL5.6 RAC:10.2.0.1.0 眼下有rac1.rac2.rac3三个节点,下面是删除rac3节点的具体过程 1.删除rac3节点上的数据库实例 [oracle@rac1 ~ ...

  9. 弗拉特利定律：Illumina怎样缔造基因革命

    蕾妮·瓦林特(Renee Valint)的女儿谢尔碧(Shelby)在2000年出生时.看起来虚弱无力,就如同一仅仅耷拉着的布娃娃.谢尔碧学着走路和说话,但学得很慢.错过了儿童发展的重要阶段.到4岁时 ...

  10. Qt中暂停线程的执行（主线程和工作线程共用一把锁，一旦主线程将它锁上，工作线程就无法运行了，这也是一个办法）

    在线程中定义一个信号量: QMutex pause; 把run()函数中循环执行的部分用信号量pause锁住:   void run()   {   while(1)   {   pause.lock ...