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 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- Yum与RPM
Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...
- Qt pro使用sql之类的需要添加的模块
举个栗子,当要使用QSqlQuery 的时候需要在pro中添加Qt +=sql 然后在.h里面#include<QSqlQuery>即可使用sql. 同理要使用media或者net的时候只 ...
- Qt QSS图片样式切割，三种状态normal,hover,pressed
要切割的样式图片如下: pix_Button->setStyleSheet("QPushButton{ border-image:url(:/image/MyButtonimage/m ...
- windows读密码的几种姿势
1.mimikatz mimikatz.exe "sekurlsa::debug" "sekurlsa::logonPasswords full" >&g ...
- Quartz.Net 任务调度之传递参数(2)
1.jobDetail //添加 //Key:Value jobDetail.JobDataMap.Add("张翼德", "张翼德"); jobDetail.J ...
- mac终端命令--常用快捷键
Ctrl + c 取消当前行输入的命令,进入下一行.或者中止一个错误的或者发疯的命令 Ctrl + a 光标移动到行首(Ahead of line),相当于通常的Home ...
- POJ 3187 Backward Digit Sums （dfs，杨辉三角形性质）
FJ and his cows enjoy playing a mental game. They write down the numbers from 1 to N (1 <= N < ...
- Appium+python自动化-查看app元素属性
本文转自:https://www.cnblogs.com/yoyoketang/p/7581831.html 前言 学UI自动化首先就是定位页面元素,玩过android版的appium小伙伴应该都知道 ...
- HTML-参考手册: 颜色混搭
ylbtech-HTML-参考手册: 颜色混搭 1.返回顶部 1. HTML 颜色混搭 混搭两种颜色,并查看效果: 选择颜色: #FF0000 #0000FF 顶部颜色: ...
- Java构造函数(构造器)
构造函数是用于在对象创建后立即初始化对象的代码块.构造函数的结构看起来类似于一个方法. 声明构造函数 构造函数声明的一般语法是: 1 2 3 <Modifiers> <Constru ...