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 二 图片验证码的识别” ...
随机推荐
- Java常量池详细说明
java常量池技术 java中的常量池技术,是为了方便快捷地创建某些对象而出现的,当需要一个对象时,就可以从池中取一个出来(如果池中没有则创建一个),则在需要重复创建相等变量时节省了很多时间.常量池 ...
- 企业版 Linux 附加软件包(EPEL)
企业版 Linux 附加软件包(以下简称 EPEL)是一个由特别兴趣小组创建.维护并管理的,针对 红帽企业版 Linux(RHEL)及其衍生发行版(比如 CentOS.Scientific Linux ...
- 【例题4-3 uva 133】The Dole Queue
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写个数组模拟链表 但注意,得用个辅助数组flag.. 不然可能会出现没能跳过中间的被占区域的情况. 比如 1 2 idx # # # ...
- mybatis源码阅读-SqlSessionFactory和SqlSession(三)
说明 读了3遍:https://my.oschina.net/zudajun/blog/665956 现在统一整理成笔记 并跟着源码一行一行调试 统一整理起来 SqlSession 接口定义 publ ...
- 洛谷 P1131 BZOJ 1060 [ZJOI2007]时态同步
题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两个节点 ...
- 0929关于MySQL操作规范（总结）
用户权限管理 创建用户 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: Username所创建的用户名 host 指定该用 ...
- [GraphQL] Apollo React Mutation Component
In this lesson I refactor a React component that utilizes a higher-order component for mutations to ...
- 检測wifi是否须要portal验证 公共场所wifi验证
何为wifi portal验证? 平时在商场,咖啡厅,银行等公共场所.我们手机提示:有可用WLAN.这些WIFI能够直接连接,不须要password,但须要我们手动在手机网页上进行验证,通常是输入一个 ...
- C++：探究纯虚析构函数以及实现数组的高速排序与链表的归并排序
C++:探究纯虚析构函数以及实现数组的高速排序与链表的归并排序 标签: 数据结构 数组 链表 高速排序 归并排序 抽象类 虚继承 by 小威威 1.介绍 本篇博文将通过课后作业的(15 C++ Hom ...
- 支持中文的基于词为基本粒度的前缀树（prefix trie）python实现
Trie树,也叫字典树.前缀树.可用于"predictive text"和"autocompletion".亦可用于统计词频(边插入Trie树边更新或加入词频) ...