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 ...
随机推荐
- DolphinScheduler 新晋 Committer 成员啦
Apache DolphinScheduler在2021年的3月18号正式成为 Apache 顶级项目后,就又迎来了好消息,经过Apache DolphinScheduler PMC们的推荐和投票, ...
- 个人学习记录-Cpp基础-成员初始化列表
Translator Translator 参考链接: https://blog.csdn.net/XIONGXING_xx/article/details/115553291http ...
- JS的简介
JS式JavaScript的简称,它是一门弱语言,它可以实现让网页动起来 JS的构成 核心(ECMAScript) 文档对象模型(DOM)-- Document Object Module 浏览器对 ...
- 面试题：Java序列化与反序列化
目录 序列化和反序列化的概念 应用场景? 序列化实现的方式 继承Serializable接口,普通序列化 继承Externalizable接口,强制自定义序列化 serialVersionUID的作用 ...
- Hack The Box（ Starting Point ）
Hack The Box [Starting Point] 初始点 -- 了解渗透测试的基础知识. 这一章节对于一个渗透小白来说,可以快速的成长.以下将提供详细的解题思路,与实操步骤. TIER 0 ...
- 第五十八篇：webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- 手写tomcat——netty版
点击查看代码 package com.grady.diytomcat; import com.grady.diytomcat.handler.DiyNettyTomcatHandler; import ...
- 【设计模式】Java设计模式 - 桥接模式
[设计模式]Java设计模式 - 桥接模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一起 ...
- SQL CASE语句的使用
SQL CASE语句的使用 CASE是一个控制流语句,其作用与IF-THEN-ELSE语句非常相似,可根据数据选择值. CASE语句遍历条件并在满足第一个条件时返回值. 因此,一旦条件成立,它将短路, ...
- web字体浮在图像中央
在做项目的过程中遇到了需要将图像作为背景,将字体显示在图像中央需求. 尝试了两种做法: 第一种方法为设置一个div设置属性为relative固定这个框的位置,将图片铺在div块里. 在div再设一个d ...