Vue基础之生命周期函数[残缺版]！
Vue基础之生命周期函数[残缺版]！
为什么说是残缺版呢？! 因为有一些周期函数我并没有学到！所以是残缺版！
01 beforeCreate
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。// 简单理解就是整个页面创建之前调用的生命周期!
02 created
/* 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，
属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 */
03 beforeMount
//在挂载开始之前被调用：相关的渲染函数首次被调用
04 mounted
//el 被新创建的 vm.$el 替换, 挂载成功
05 beforeUpdate
//数据更新时调用
// 数据变化之前调用的一个函数!
06 updated
//组件 DOM 已经更新, 组件更新完毕
温馨提醒
// 生命周期需要写在new Vue 传递的这个对象内!以属性的方式进行声明!这个属性他是一个函数!在 Vue运行的每个阶段, 会调用以生命的周期函数!!
// 有一点需要注意, 就是生命周期函数是不能使用箭头函的!因为箭头函数没有this!
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
// 生命周期需要写在new Vue 传递的这个对象内!以属性的方式进行声明!这个属性他是一个函数!在 Vue运行的每个阶段, 会调用以生命的周期函数!!
// 有一点需要注意, 就是生命周期函数是不能使用箭头函的!因为箭头函数没有this!
var vm = new Vue({
el: "#app",
data: {
msg: "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
// 简单理解就是整个页面创建之前调用的生命周期!
beforeCreate: function() {
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created: function() {
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount: function() {
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂载成功
mounted: function() {
console.log('mounted');
},
//数据更新时调用
// 数据变化之前调用的一个函数!
beforeUpdate: function() {
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated: function() {
console.log('updated');
}
});
setTimeout(function() {
vm.msg = "change ......";
}, 3000);
</script>
</body>
Vue基础之生命周期函数[残缺版]！的更多相关文章
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- Vue 组件以及生命周期函数
组件相当于母版的功能 新建.vue文件,手动完善 <template><div>根节点</div></template> <script>& ...
- Vue 各个阶段生命周期函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue过滤器、生命周期函数和vue-resource
一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- vue基础篇---生命周期
每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之 ...
- vue父子组件生命周期函数执行顺序
vue父组件加载和销毁执行最后一个钩子函数之前先执行一遍子组件的钩子: 1.加载 父:beforecreate-created-beforeMount-(子:beforecreate-created- ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- vue组件的生命周期详解
1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
随机推荐
- 它听键盘声就知道你敲的是什么——GitHub 热点速览 Vol.51
作者:HelloGitHub-小鱼干 本以为本周的 GitHub 和十二月一样平平无奇就那么度过了,结果 BackgroundMattingV2 重新刷新了本人的认知,还能这种骚操作在线实时抠视频去背 ...
- 使用Attribute限制Action只接受Ajax请求
原博文 https://www.cnblogs.com/h82258652/p/3939365.html 代码 /// <summary> /// 仅允许Ajax操作 /// </s ...
- SQL优化器-RBO与CBO分别是什么
数据库系统发展历史 数据库系统产生于20世纪60年代中期,至今有近50多年的历史,其发展经历了三代演变,造就了四位图灵奖得主,发展成为一门计算机基础学科,带动了一个巨大的软件产业. 数据库系统是操作系 ...
- [leetcode]64Minimum Path Sum 动态规划
/** * Given a m x n grid filled with non-negative numbers, * find a path from top left to bottom rig ...
- Spring Cloud Config原码篇（十）
上篇中说到通过@Value注解获取配置中心的内容进行注入,要想了解这个就要知道spring Environment原理,关于这原理我看了下网上分析的文章:https://blog.csdn.net/t ...
- 分析http协议和高并发网站架构
案例任务名称 分析http协议和高并发网站架构 案例训练目标 深入理解http协议的工作原理 掌握http协议的分析方法 包含技能点 搭建web服务器 编辑简单的html页面并上传到服务器 使用wir ...
- TurtleBot3使用课程-第四节（北京智能佳）
目录 1.机器学习 2 1.1 机器学习一 2 1.1.1 目标 2 1.1.2 操作环境 2 1.1.3 设置 2 1.1.4运行(它需要超过几秒取决于PC) 3 1.1.5运行屏幕 3 1.1.6 ...
- ES6箭头函数与this指向
一.ES6箭头函数 ES6之前的语法想要定义一个函数,如图example1,ES6之后定义一个函数如图example2,相比较之下简洁了很多 二.函数的this指向 非箭头函数,谁调用函数this指向 ...
- window10搭建pyspark（超级详细）
一.组件版本说明 Java JDK:1.8.0_144 spark-2.4.3-bin-hadoop2.7hadoop-2.7.7 scala-2.12.8 hadooponwindows-maste ...
- ElasticSearch教程——filter与query对比（转学习使用）
一.数据准备 PUT /company/employee/2 { "address": { "country": "china", &quo ...