Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）
文章目录
1、Vue生命周期
1.1 概念
生命周期：
- 1、又名：生命周期回调函数、生命周期函数、生命周期钩子。
- 2、是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 4、生命周期函数中的this指向是vm 或 组件实例对象。
常用的生命周期钩子：
- 1、mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
- 2、beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
- 1、销毁后借助Vue开发者工具看不到任何信息。
- 2、销毁后自定义事件会失效，但原生DOM事件依然有效。
- 3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
官网文档说明：
- 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
1.2 图解
2、钩子函数的用法说明
2.1 beforeCreate()和created()的详细讲述
2.1.1 方法说明
beforeCreate() :数据代理还未开始、不能访问到data中的数据、method中的方法。
- created(): 可以访问到data中的数据、method中的方法
2.1.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1 v-text="n"></h1>
<h1>当前n的值{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
value: "Vue",
n: 1
},
methods: {
add() {
console.log('add')
this.n++
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this)
debugger
},
created() {
console.log('created')
console.log(this)
debugger
},
})
</script>
</body>
</html>
2.1.3 测试效果
2.2 beforeMount()和mounted()的详细讲述
2.2.1方法说明
beforeMount(): 页面呈现的是未经Vue编译的DOM结构。所有对DOM的操作，最终都不奏效。
mounted(): 页面中呈现的是经过Vue编译的DOM。对DOM的操作均有效。到此、初始化结束、一般再次进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作
2.2.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1 v-text="n"></h1>
<h1>当前n的值{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
value: "Vue",
n: 1
},
methods: {
add() {
console.log('add')
this.n++
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this)
},
created() {
console.log('created')
console.log(this)
},
beforeMount() {
console.log('beforeMount')
debugger
},
mounted() {
console.log('mounted')
debugger
},
})
</script>
</body>
</html>
2.2.3 测试效果
2.3 beforeUpdate()和updated()的详细讲述
2.3.1 方法说明
beforeUpdate(): 数据是新的、页面中的数据还未更新。页面尚未和数据保持同步。
updated(): 数据是新的、页面也是新的。页面和数据保持同步
2.3.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1 v-text="n"></h1>
<h1>当前n的值{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
value: "Vue",
n: 1
},
methods: {
add() {
console.log('add')
this.n++
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this)
},
created() {
console.log('created')
console.log(this)
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log(this)
console.log('beforeUpdate')
debugger
},
updated() {
console.log('updated')
debugger
},
})
</script>
</body>
</html>
2.3.3 测试效果
2.4 beforeDestory()和destoryed
2.4 beforeDestroy() 和 destroyed() 的详细讲述
2.4.1 方法说明
beforeDestroy(): data、methods、指令等等。都还处于可用状态、马上要销毁、一般在此阶段：关闭定时器、取消订阅信息、解绑自定义事件等收尾操作
2.4.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1 v-text="n"></h1>
<h1>当前n的值{{n}}</h1>
<button @click="add">点我n+1</button>
<button @click="bye">点我销毁vm</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
value: "Vue",
n: 1
},
methods: {
add() {
console.log('add')
this.n++
},
bye() {
console.log('bye')
this.$destroy()
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this)
},
created() {
console.log('created')
console.log(this)
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log(this)
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
debugger
},
destroyed() {
console.log('destroyed')
},
})
</script>
</body>
</html>
2.4.3 测试效果
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）的更多相关文章
- vue.js的生命周期 及其created和mounted的部分
网上很多人有所总结,转载自: https://segmentfault.com/a/1190000008570622 关于created和mounted的部分,也可以参考: https://blo ...
- vue 学习一 组件生命周期
先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeC ...
- vue学习(十九) 生命周期 了解
生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- vue学习生命周期（created和mounted区别）
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表). mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom ...
- vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- Vue之组件的生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- SQL 注入复习总结
一.介绍 1.什么是SQL注入? sql 注入是一种将 sql 代码添加到输入参数中,传递到 sql 服务器解析并执行的一种攻击手法. 2.SQL注入的原理 SQL 是操作数据库数据的结构化查询语言, ...
- 【Java面试】这道互联网高频面试题难住了80%的程序员？索引什么时候失效？
"索引什么时候失效?" 面试过程中,突如其来的一个问题,是不是有点懵? 没关系,关注我,面试不迷路. 我是Mic,一个工作了14年的Java程序员. 索引失效涉及到的知识点非常多, ...
- MGR的gtid_executed不连续的问题分析
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 1.问题描述 在做MGR测试的时候偶尔遇到gtid_executed事务ID不连续的问题,但是并不影响数据库的正常运行.现 ...
- 关于奉加微PHY62xx系列如何选型？PHY6222/PHY6212/PHY6252
PHY6252是一款支持BLE 5.2功能的系统级芯片(SOC),集成了低功耗的高性能多模射频收发机,搭载32位高性能低功耗处理器,提供64K retention SRAM.可选512/256K Fl ...
- 【Java面试】Java有几种文件拷贝方式，哪一种效率最高？
"Java有几种文件拷贝方式,哪一种效率最高?" 这个问题是京东一面的时候,针对4年经验的同学的一个面试题. 大家好,我是Mic,一个工作了14年的Java程序员. 关于这个问题的 ...
- Luogu1137 旅行计划 （拓扑排序）
每次入队时DP : \(f[v] = \max \{f[u] + 1\}\) #include <iostream> #include <cstdio> #include &l ...
- rcu的学习记录
crash> p rcu_sched_state.node[0] $13 = { lock = { raw_lock = { slock = 748760225 } }, gpnum = 211 ...
- 每个开发人员都应该关注的7个优秀的GitHub仓库
目录 1. FreeCodeCamp 2. Developer Roadmap 3. Awesome 4. Build Your Own X 5. Git Ignore 6. System Desig ...
- Linux应急响应学习
Linux应急响应-系统日志排查-溯源 溯源 找到攻击者.系统日志分析攻击者的ip 攻击者可能留下了一些代码 样本 网上的信息很大程度上是不可信的. 方法: 蜜罐 高交互的蜜罐 溯源: ip 日志 ...
- 【python】一些python用法规律笔记
作为本科用了多年MATLAB的工科生,学起来python有些似曾相识但也有些不习惯的地方. 在这里总结一下,慢慢整理,希望能巩固python语法 一.前闭后开 这个是和MATLAB很大不同.不论是ra ...