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框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
随机推荐
- Java 细粒度锁续篇
在上篇文章中大概介绍了 Java 中细粒度锁的几种实现方式,并且针对每种方式都做了优缺点说明,在使用的时候就需要根据业务需求选择更合适的一种.上篇文章中的最后一种弱引用锁的实现方式,我在里面也说了其实 ...
- C#中RDLC控制某列的显示隐藏
使用 1.添加参数IsEnable(用于控制显示或隐藏)2.在RDLC页面,需要控制的列上,右键,列的可见性...,基于表达式隐藏或显示3.输入 IIF(Parameters!IsEnable.Val ...
- 【基础】Linux系统的运行级别
1.系统运行级别的配置文件 什么是运行级呢?简单的说,运行级就是操作系统当前正在运行的功能级别. 它让一些程序在一个级别启动,而另外一个级别的时候不启动. Linux系统的有效登录模式有0~9共十种, ...
- Redis 设计与实现：Redis 对象
本文的分析都是基于 Redis 6.0 版本源码 redis 6.0 源码:https://github.com/redis/redis/tree/6.0 在 Redis 中,有五大数据类型,都统一封 ...
- spring boot编程思想（核心篇） pdf 下载 it教程
资料简介:本书是<Spring Boot 编程思想>的核心篇,开篇总览Spring Boot核心特性,接着讨论自动装配(Auto-Configuration)与SpringApplicat ...
- Java：利用BigDecimal类巧妙处理Double类型精度丢失
目录 本篇要点 经典问题:浮点数精度丢失 十进制整数如何转化为二进制整数? 十进制小数如何转化为二进制数? 如何用BigDecimal解决double精度问题? new BigDecimal(doub ...
- feig中调用其他微服务接口无反应
1.调用微服务时get请求接口中不能使用@RequestBody注解,不然接口调用无反应.post接口中可以使用@RequestBody注解
- [leetcode]109. Convert Sorted List to Binary Search Tree链表构建二叉搜索树
二叉树的各种遍历方式都是可以建立二叉树的,例如中序遍历,就是在第一步建立左子树,中间第二步建立新的节点,第三步构建右子树 此题利用二叉搜索树的中序遍历是递增序列的特点,而链表正好就是递增序列,从左子树 ...
- 前端中的 IoC 理念
背景 前端应用在不断壮大的过程中,内部模块间的依赖可能也会随之越来越复杂,模块间的 低复用性 导致应用 难以维护,不过我们可以借助计算机领域的一些优秀的编程理念来一定程度上解决这些问题,接下来要讲述的 ...
- 前端Vscode常用插件概述
以下是我自己在工作中常用的插件,写给刚入门的前端coder.VSCode插件商店中实用的插件还是很多的,大家也可以对感兴趣的插件下载下来尝试一下的! 持续更新 插件名称 概述 作用 常用默认快捷键 C ...