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 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- 42th 逻辑的连续性 取决于 细节的理解-------------我是个厨子:类的调用vs 对象调用方法
类的调用vs 对象调用方法 class Cook5: '''这是一个厨师的类''' # 类是一系列对象相同的特征与技能的结合体 # 用变量表示特征(属性) ...
- Elasticsearch 分布式文档存储
shard = hash(routing) % number_of_primary_shards决定文档在哪个分片上,routing 是一个可变值,默认是文档的 _id ,也可以设置成一个自定义的值. ...
- .net 开源项目地址
https://github.com/dotnet/corefx 这个是.net core的 开源项目地址 https://github.com/aspnet 这个下面是asp.net core 框架 ...
- disk或者Partition镜像的制作
备份镜像还原一般都是在client-server端这边才有涉及,不过作为平时爱折腾的咸鱼,表示偶尔玩玩这种操作也不错: 工具:pc X 1(装有 大白菜,装机吧,一类制作pe软件的即可,大同小异) ...
- plt.imshow()
import matplotlib.pyplot as plt plt.imshow(digits.images[-1], cmap = plt.cm.gray_r) .imshow() Plotti ...
- boot、cloud
最近在学习Spring Boot也整理了一些文章,有需要的可以参考一下 https://www.zhihu.com/question/39483566 Spring Cloud是一系列框架的有序集合. ...
- 【Dart学习】--Dart之字符串(String)的相关方法总结
字符串定义使用单引号或双引号 String a = "abcdefg"; String b = '; 创建多行字符串,保留内在格式使用三个单引号或三个双引号 创建多行字符串,保留内 ...
- linux基础知识-常用命令
ifconfig :查看当前ip hostname:查看主机名 vim /etc/hosts:修改地址映射 service iptables status : 查看防火墙状态 chkconfig ip ...
- jekins—持续集成
json转换为Python的字典形式 Martin fowler:通过自动化的构建,编译-发布-自动化测试,尽早的发现集成的错误 持续集成的要素: 统一的代码库 自动构建编译 自动测试(单元测试) 每 ...
- docker常见启动参数
dockerd启动参数详解: dockerd \ --bip \ #设置docker0网段 --selinux-enabled=false \ #关闭selinux --insecure-regist ...