Vue2:实例生命周期、js生命周期
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生命周期的更多相关文章
- 简简单单的Vue2（简单语法，生命周期，组件）
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Autofac容器对象实例的几种生命周期类型
实例范围决定了如何在同一服务的请求之间共享实例. 请注意,您应该熟悉生命周期范围的概念,以便更好地理解此处发生的情况. 当请求服务时,Autofac可以返回单个实例(单实例作用域),新实例(每个依赖作 ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- 2.Git基础-仓库的获取方式与Git文件的状态变化周期（生命周期）
1.仓库的获取 Git仓库的获取有两种方式: 1.从现有目录或者是项目中导入所有文件到Git中. 2.从一个服务器clone一个现有的Git仓库. 如果使用第一种方式,只需要在你希望被Git进行管理的 ...
- 时钟周期、振荡周期、机器周期、CPU周期、状态周期、指令周期、总线周期、任务周期
http://blog.csdn.net/yangtalent1206/article/details/5853017 计算机系统有一系列的“周期”概念,区别.联系地理解这些概念至关重要.以下对时钟周 ...
- e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （六） 自动化测试结构小节
上一篇‘e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (五) 如何让窗体记录登录 ...
- e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （四） Q 反回调
上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (三) SqlServ ...
- e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （三） SqlServer数据库的访问
上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别” ...
随机推荐
- UOJ #310 黎明前的巧克力 (FWT)
题目传送门 题目大意:给你一个序列,定义一个子序列的权值表示子序列中元素的异或和,现在让你选出两个互不相交的子序列,求选出的这两个子序列权值相等的方案数,$n,a_{i}\leq 10^{6}$ 这是 ...
- [luogu4285 SHOI2008] 汉诺塔 (暴力，数学)
传送门 Solution 强行猜测公式形如\(f_i=k\times f_{i-1}+b\),暴力求\(f_1,f_2,f_3\),剩下的递推就行 Code #include <cstdio&g ...
- Linux思维导图之文件压缩
- 在Win32 Application 环境下实现MFC窗口的创建
// Win32下MFC.cpp : Defines the entry point for the application.// #include "stdafx.h" clas ...
- JavaSE 学习笔记之封装（四）
封 装(面向对象特征之一):是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. 好处:将变化隔离:便于使用:提高重用性:安全性. 封装原则:将不需要对外提供的内容都隐藏起来,把属性都隐藏,提供公共 ...
- JAVA之StringBuffer测试样码
这类操作大同小异,但是,高手却能从String,StringBuilder,StringBuffer的应用场景和性能上,分析出其在JAVA编译和JVM上的实现过程差别. 我在CSDN上就看到一个高手分 ...
- HDU 2224 The shortest path
The shortest path Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- [MySQLCPU]线上飙升800%，load达到12的解决过程
接到报警通知,负载过高,达到800%,load也过高,有11了. MySQL版本为5.6.12-log 1 top 之后,确实是mysqld进程占据了所有资源. 2 查看error日志,无任何异常 3 ...
- HDU-4451-Dressing （2012年金华赛区J题）
Dressing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- mysql 安装完毕后登陆不了mysql的 shell 即mysql>遇到：ERROR 1045 (28000): Access denied for user 'root'@'localhost‘
[root@hzswtb2-mpc ~]# mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using pas ...