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(页 ...
随机推荐
- file size php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Helm 安装部署Kubernetes的dashboard
Kubernetes Dashboard 是 k8s集群的一个 WEB UI管理工具,代码托管在 github 上,地址:https://github.com/kubernetes/dashboard ...
- LeetCode 934. Shortest Bridge
原题链接在这里:https://leetcode.com/problems/shortest-bridge/ 题目: In a given 2D binary array A, there are t ...
- 用于 Quinella/Exacta/Trifecta/Pick Four/Pick Six/Quaddie/Superfecta 7大规则的测试
上2篇给了详细API 设计,下面我们来模拟测试下: Quinella: self.bet_type = "Quinella" self.nraces = 1 self.horse_ ...
- 【UVA1057】Routing
[UVA1057]Routing 题面 洛谷 题解 有一个比较好想的dp就是\(f_{i,j}\)表示第一个点在\(i\),第二个点在\(j\)的最小点数,但是直接搞不好转移. 考虑建出反图,那么\( ...
- 如何使用Processing获取图片中每一个像素的坐标
剛好碰到有同學問如何在Processing中進行像素級的圖片處理, =============================================================此時需要一 ...
- Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- MyBatis传入参数为list、数组、map写法
1.foreach简单介绍: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有item,index,collection,open,sep ...
- 用JAVA把内存里的二进制文件打包成ZIP包
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.ut ...
- 【转】Android root检测方法总结
一 为什么要进行root检测?出于安全原因,我们的应用程序不建议在已经root的设备上运行,所以需要检测是否设备已经root,以提示用户若继续使用会存在风险. 二 root了会有什么风险?在Linux ...