vue组件实例的生命周期
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="demo"></div>
<script src='https://cdn.bootcss.com/vue/2.3.2/vue.js'></script>
<script>
var vm = new Vue({
el: '#demo',
beforeCreate: function () {
console.log("开始初始化时同步调用,此时数据观察,事件都没有初始化");
},
created: function () {
console.log('已经完成实例的创建');
},
beforeMount: function () {
console.log("在模版编译之前执行");
},
mounted: function () {
console.log("模版编译完成");
},
beforeUpdate: function () {
console.log("更新数据前");
},
updated: function () {
console.log('如果你要更新数据,那么每次更新数据之后就会调用');
},
beforeDestroy: function () {
console.log("开始销毁实例时调用,此用的实例依然有用");
},
destroyed: function () {
console.log("实例已销毁");
},
activated: function () {
console.log("动态组件初始化渲染过程中调用,需要keep-live配合使用");
},
deactivated: function () {
console.log("动态组件移出过程中调用,需要keep-live配合使用");
}
});
</script>
</body> </html>
对钩子函数一个比较通俗易懂的解释:
Vue在实例化一个组件时会在特定的阶段调用特定的方法，调用的这个方法就叫钩子方法，比如Vue在实例化组件之初按顺序调用beforeCreated，created，beforeMounted，mounted，每个阶段组件内部的属性都是不一样的，比如created钩子时视图还没有渲染，就不能做一些dom操作。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段，当然放在created，beforeMounted也是可以的，因为ajax是异步的嘛，ajax之后的回调会放在事件队列的尾部，此时实例化组件整个过程会在ajax回调之前执行完毕。所以ajax操作放在created，mounted里面都是可以的。
参考文章：https://segmentfault.com/a/1190000008010666
vue组件实例的生命周期的更多相关文章
- Vue2.5笔记：Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue 实例以及生命周期
最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...
- vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue.js 1.x 和 2.x 实例的生命周期
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1 ...
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- jvm主要组成部分及其作用
1.类加载器(Class Loader):加载类文件到内存.Class loader只管加载,只要符合文件结构就加载,至于能否运行,它不负责,那是有Exectution Engine 负责的. 2.执 ...
- jquery-ui拖拽对齐线位置不对的操作
1,在draggable的drag中直接获取$(this).offset()来给对齐线设置top和left: 2,在draggable的drag中直接获取event的clientX去和event的of ...
- OpenCV常用基本处理函数（1）读写
图像的基本操作 cv.imread() 读取图片 cv.imshow() 显示图片 cv2.imwrite() 保存图像 使用摄像头捕获实时图像 OpenCV 为这中应用提供了 ...
- 编译自己的jdk(使用openJDK源码编译jdk )
找到openjdk网站(http://hg.openjdk.java.net/) 选择需要编译的版本,浏览readme文件,有获取源码及编译步骤 CentOS-7-x86_64-DVD-1804.is ...
- Spring data jpa persistence .xml 配置文件
<?xml version="1.0" encoding="UTF-8"?><persistence xmlns="http://j ...
- （转）Uncaught TypeError: Cannot set property 'innerHTML' of null
(转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...
- OC学习篇之---数组对象的引用计数问题和自动释放池的概念
之前一片文章中我们介绍了OC中的两个关键字@property和@synthesize的使用的使用: http://blog.csdn.net/jiangwei0910410003/article/de ...
- angularjs $index用来取顺序
$index用来取顺序 null
- 国际C 语言乱码大赛（IOCCC ）
你也许听说过“国际C 语言乱码大赛(IOCCC )”,能获奖的人毫无疑问是世界顶级C 程序员.这是他们利用C 语言的特点极限挖掘的结果.下面这个例子就是网上广为流传的 一个经典作品:// 原始代码如下 ...
- appium 链接真机
1. 安装驱动 说明:如果驱动装不上,可以使用第三方的工具去安装.(一般来说还是用第三方) 这里推荐锤子科技的HandShaker, 地址:http://www.smartisan.com/apps/ ...