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 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- css实现下拉框导航条
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- excel acm 高校排名(hdoj)
其实写一个程序是最方便的... 不用每次进行很多次操作. 当然,能获得后台的数据更好…… e.g. 链接: https://pan.baidu.com/s/1a7s85oaKGam1-0mJ2v39u ...
- Git分支,合并,切换分支的使用
1.创建合并分支 在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD指针严格来说不是指向提交 ...
- PHP发送公众号模板消息
<?php /* * 模板消息发送,电脑端测试时需要手动填写openid * 微信端会自动获取当前openid发送无需填写 */ header("Content-type: text/ ...
- setTimeout（）和setInterval（）的用法及区别
setInterval 方法表示每间隔一段时间执行一次函数,会一直执行下去,除非手动 clearInterval 来停止. var i = 10; var timer = setInterval(() ...
- Python基础教程（006）--Python的特点
前言 了解Python背景,明白Python在目前社会中的标准库是有成千上万的Python爱好者共同维护的. 知识点 Python是完全面相对象的语言 函数,模块,数字,字符串都是对象,在Python ...
- 【Java架构：基础技术】一篇文章搞掂：Idea
一.使用技巧 1.1.配置Maven 打开File-Settings打开设置界面 1.2.配置JDK JDK可以设置默认版本,也可以设置针对某个项目 分别对应File-Other Setting-De ...
- error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8
编译链接报错 error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8 解决方案: 在代码中添加链接库Shell32.lib #pragma commen ...
- 使用FTP服务
ftp 占用20 21两个端口 安装vsftpd程序 键入命令 yum install vsftpd -y 清空默认的防火墙默认规则: [root@linuxprobe ~]# iptabl ...
- Codeforces New Year and Arbitrary Arrangement
New Year and Arbitrary Arrangement time limit per test2 seconds You are given three integers k, pa a ...