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. [jzoj 5778]【NOIP提高A组模拟2018.8.8】没有硝烟的战争 (博弈论+dp)

    传送门 Description 被污染的灰灰草原上有羊和狼.有N只动物围成一圈,每只动物是羊或狼. 该游戏从其中的一只动物开始,报出[1,K]区间的整数,若上一只动物报出的数是x,下一只动物可以报[x ...

  2. 爬虫数据使用MongDB保存时自动过滤重复数据

    本文转载自以下网站: 爬虫断了?一招搞定 MongoDB 重复数据 https://www.makcyun.top/web_scraping_withpython13.html 需要学习的地方: Mo ...

  3. Java Web学习总结（28）——Java Web项目MVC开源框架SSH和SSM比较

    SSH和SSM定义 SSH 通常指的是 Struts2 做控制器(controller),spring 管理各层的组件,hibernate 负责持久化层. SSM 则指的是 SpringMVC 做控制 ...

  4. chrome js 获取css

    var myDiv = document.getElementById("chooseRect"); var computedStyle = document.defaultVie ...

  5. 【ACM】hdu_2115_I Love This Game_201308021517

    I Love This GameTime Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. 项目 cmdb(一)

    Django之ModelForm组件 ModelForm    a.  class Meta:            model,                           # 对应Mode ...

  7. 【JS】垃圾回收和块级作用域

    垃圾回收: JavaScript中,开发者不必关心内存分配和回收的问题.这和Java语言相似.有一个垃圾自己主动回收机制.那么JavaScript内部到底是如何回收垃圾的呢? 使用标记回收法:就是说. ...

  8. python3字符编码错误

    在3.x 这里返回的是bytes-like类型, 所以这里不需要释放编码 ,释放也没有意义, 而是应该encode 转换成我们需要的编码, 之所会造成类型错误,原因是就在这里. 他们返回的类型不一样, ...

  9. SecureCRT图形界面(通过设置调用Xmanager - Passive程序)

    首先,在server进行设置 假设server是图形化界面启动的,xhost +命令能够不用运行 [root@test ~]# xhost + xhost:  unable to open displ ...

  10. Gridview表格控件

    Gridview表格控件 效果图: 分析: 使用和ListvVew很像,都是经过适配器将数据绑定到控件上 具体步骤如下: 1.创建GridView控件,并指定列数 android:numColumns ...