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>vue生命周期学习</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h1 id="message">{{msg}}</h1>
<input type="button" value="修改" @click="msg='change'">
<input type="button" value="销毁" @click="destory">
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data(){return {
msg:'Vue生命周期'
}},
methods:{
show(){
console.log('执行 show 方法');
},
destory(){
this.$destroy();
}
},
beforeCreate(){
//生命周期第一个函数，实例被创建 '之前' ,会执行它
//注意：执行函数时 data 和 methods 还没有被初始化
console.log('1:'+this.msg); //undefined
this.show(); //报错
},
created(){
//生命周期的第二个函数，实例被创建 '之后',
//注意：执行函数时data 和 methods 初始化完成
console.log('2:'+this.msg); //Vue生命周期
this.show(); //执行 show 方法
},
beforeMount(){
//生命周期的第三个函数，模板已经在内存中编辑完成
//注意：模板仅在存在于内存中，但还未把模板渲染到页面
var message = document.getElementById('message');
console.log('3:'+message.innerText); //{{msg}}
},
mounted(){
//生命周期第四个函数，模板已经在内存中编辑完成，并渲染结束
//注意：当mounted 执行完后表示实例已经完全创建好了，会在内存中等待下一个操作
var message = document.getElementById('message');
console.log('4:'+message.innerText); //Vue生命周期
},
beforeUpdate(){
//接下来的两个事件为更新前后事件
//注意：当执行beforeUpedate 页面中显示的数据是旧的，内存中是新的
console.log("5:内存中data变量:"+this.msg);
var message = document.getElementById('message'); //内存中data变量: change
console.log("5:模板中的数据:"+message.innerText); //模板中的数据: Vue生命周期
},
updated(){
console.log("6:内存中data变量:"+this.msg);
var message = document.getElementById('message'); //内存中data变量: change
console.log("6:模板中的数据:"+message.innerText); //模板中的数据: change
},
beforeDestroy:function(){
console.log('7:beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
// clearInterval(this.$options.timer)
},
destroyed:function(){
console.log('8:destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
}
})
</script>
</html>
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
应用场景:
beforeCreate: 在实例初始化之后, 数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
Mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
update: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestory: 实例销毁之前调用。在这一步，实例仍然完全可用。
destoryed : Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
Vue生命周期 以及应用场景的更多相关文章
- Vue生命周期及业务场景使用
vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到 ...
- Vue生命周期，面试常见问题
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- 面试题之（vue生命周期）
在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...
- vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
- vue—生命周期的基本介绍
Vue生命周期: 什么是生命周期: Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期 ...
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 生命周期
一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- 关于vue生命周期
官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...
随机推荐
- 【大数据】Hadoop单机安装配置
1.解压缩hadoop-2.7.6.tar.gz到/home/hadoop/Soft目录中 2.创建软链接,方便hadoop升级 ln -s /home/hadoop/Soft/hadoop-2.7 ...
- NSString+URLParser NSScanner
@implementation NSString (URLParser) -(NSDictionary*)parserToDict { NSScanner *scanner = [NSScanner ...
- swift修饰符
Declaration Modifiers Declaration modifiers are keywords or context-sensitive keywords that modify t ...
- UFUN函数 UF_CSYS UF_MODL UF_OBJ函数（建模注意坐标系）；
//用到的函数 //UF_MODL_create_block1 ,UF_MODL_ask_feat_body,UF_OBJ_set_name,UF_CSYS_map_point UF_initiali ...
- ACM之Java输入输出
本文转自:ACM之Java输入输出 一.Java之ACM注意点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错 ...
- lg4820 书堆
题目链接 题意概述:n本书,在桌子边缘堆放,求最长长度. 首先……我们需要一点初中物理知识来推一下规律. 下图是一本书的情况,一本书时书伸出1/2处于临界状态,显然. 两本书时,把两本书看作整体,则有 ...
- SQL进阶-行转列&列转行
一.行转列 1.建表 CREATE TABLE score( student_id ) NOT NULL COMMENT '学生编号' DEFAULT '', student_name ) NOT N ...
- Linux后台运行和关闭程序、查看后台任务
fg.bg.jobs.&.ctrl+z 1.& (最经常被用到) 这个用在一个命令的最后,可以把这个命令放到后台执行 2.ctrl + z 可以将一个正在 ...
- Linux搭建简单的http文件服务器111
http://192.168.31.69:8090/file/http://47.92.90.25:21888/file/在Ubuntu中通过apt-get install apache2 安装apa ...
- 分享一个Python脚本--统计redis key类型数据大小分布
概述 今天主要介绍怎么统计redis key类型数据大小分布. 原理:使用redis命令: scan.pipline.type 和 debug object 来得到 redis key 信息. 脚本 ...