独家记忆法阶四钩八

vue中一共有四个阶段,每个阶段有两个钩子函数,简称四阶钩八

四个阶段

1.初始化 ==> 创建组件 ==> beforeCreate created

2.挂载 =>渲染显示组件 => beforeMount mouted

3.更新 =》修改了变量=》触发视图刷新 => beforeUpdate updated

4.销毁 =》切换页面 =》会把组件对象从内存删除 => beforeDestory destoryed

八个钩子

<template><div><ul id="myUl"><li v-for="(item, ind) in arr" :key="ind">{{ item }}</li></ul><button@click="arr.push(Math.random() * 10)">增加一个元素</button></div>
</template><script>
export default {data () {return {msg: "我是变量",arr: [1, 2, 3, 4],isShow: true,}},//钩子从这开始beforeCreate () {// 1. 创建前console.log("beforeCreate --- 实例初始化前")console.log(this.msg) // undefined},created () {// 2. 创建后=> 发送ajax请求console.log("created ---  实例初始化后")console.log(this.msg) // "我是变量"},beforeMount () {// 3. 挂载前console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")console.log(document.getElementById("myUl")) // null// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错},mounted () {// 4. 挂载后=> 操作domconsole.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")// console.log(document.getElementById("myUl").children[1].innerHTML)console.log(document.querySelector('#myUl').children[1].innerText)},beforeUpdate () {// 5. 更新前console.log("beforeUpdate --- 数据更新, 页面更新前")// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错},updated () {// 6. 更新后console.log("updated --- 数据更新, 页面更新后")console.log(document.getElementById("myUl").children[4].innerHTML)},beforeDestroy () {// 7. 销毁前// (清除定时器 / 解绑js定义的事件)console.log("beforeDestroy --- 实例销毁之前调用")},destroyed () {// 8. 销毁后// (清除定时器 / 解绑js定义的事件)console.log("destroyed --- 销毁完成")},
};
</script><style>
</style>

工作中常用的钩子函数

1. created 大概占比百分之90%

发起Ajax 请求，从而初始化 data 数据.

2. destroyed 大概占比百分之5%

常用于销毁程序运行之前留下的定时器,或其他组件销毁后还在执行的程序.

2. mounted 大概占比百分之5%

这个主要要于在dom生成后马上获取dom元素

父子组件中的钩子函数执行的先后顺序

父组件的代码

<template><div><Life v-if="isShow"/><hr><button @click="isShow = !isShow">销毁Life组件</button></div>
</template><script>
import Life from './components/Life.vue'
export default {data(){return {isShow: true}},components: {Life},beforeCreate () {// 1. 创建前console.log("beforeCreate --- 实例初始化前 我是父组件")console.log(this.msg) // undefined},created () {// 2. 创建后=> 发送ajax请求console.log("created ---  实例初始化后 我是父组件")console.log(this.msg) // "我是变量"},beforeMount () {// 3. 挂载前console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前 我是父组件")console.log(document.getElementById("myUl")) // null// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错},mounted () {// 4. 挂载后=> 操作domconsole.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上11111111111111111111 我是父组件")// console.log(document.getElementById("myUl").children[1].innerHTML)console.log(document.querySelector('#myUl').children[1].innerText)},beforeUpdate () {// 5. 更新前console.log("beforeUpdate --- 数据更新, 页面更新前 我是父组件")// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错},updated () {// 6. 更新后console.log("updated --- 数据更新, 页面更新后 我是父组件")console.log(document.getElementById("myUl").children[4].innerHTML)},beforeDestroy () {// 7. 销毁前// (清除定时器 / 解绑js定义的事件)console.log("beforeDestroy --- 实例销毁之前调用 我是父组件")},destroyed () {// 8. 销毁后// (清除定时器 / 解绑js定义的事件)console.log("destroyed --- 销毁完成 我是父组件")},
};
</script>

子组件代码

<template><div><ul id="myUl"><li v-for="(item, ind) in arr" :key="ind">{{ item }}</li></ul><button@click="arr.push(Math.random() * 10)">增加一个元素</button></div>
</template><script>
export default {data () {return {msg: "我是变量",arr: [1, 2, 3, 4],isShow: true,}},beforeCreate () {// 1. 创建前console.log("beforeCreate --- 实例初始化前 我是子组件")console.log(this.msg) // undefined},created () {// 2. 创建后=> 发送ajax请求console.log("created ---  实例初始化后 我是子组件")console.log(this.msg) // "我是变量"},beforeMount () {// 3. 挂载前console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前 我是子组件")console.log(document.getElementById("myUl")) // null// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错},mounted () {// 4. 挂载后=> 操作domconsole.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 我是子组件")// console.log(document.getElementById("myUl").children[1].innerHTML)console.log(document.querySelector('#myUl').children[1].innerText)},beforeUpdate () {// 5. 更新前console.log("beforeUpdate --- 数据更新, 页面更新前 我是子组件" )// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错},updated () {// 6. 更新后console.log("updated --- 数据更新, 页面更新后 我是子组件")console.log(document.getElementById("myUl").children[4].innerHTML)},beforeDestroy () {// 7. 销毁前// (清除定时器 / 解绑js定义的事件)console.log("beforeDestroy --- 实例销毁之前调用 我是子组件")},destroyed () {// 8. 销毁后// (清除定时器 / 解绑js定义的事件)console.log("destroyed --- 销毁完成 我是子组件")},
};
</script><style>
</style>

运行结果

父组件先执行前三阶段然后子组件执行前三阶段

挂载先执行子组件后执行父组件

子组件更新时,只执行子组件的更新

子组件销毁时,父组件先执行beforeUpda,然后子组件执行销毁阶段.然后父组件执行updare.

vue官方提供的参考图

学累了, 来个美女放松放松

【Vue】生命周期中的八个钩子函数相关推荐

Vue生命周期中钩子函数理解简记
Vue生命周期钩子函数钩子函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroy ...
k8s pod生命周期、初始化容器、钩子函数、容器探测、重启策略
pod结构 Pause容器 Pause容器是每个Pod都会有的一个根容器,它的作用有两个可以以它为根据,评估整个pod的健康状态可以在根容器上设置IP地址,其他容器都以此IP(Pod IP),以实 ...
详解vue生命周期(重点！！)
首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: 可以看出在vue--整个的生命周期中会有很多 ...
vue函数如何调用其他函数?_从源码中学Vue（一）生命周期中的钩子函数的那点事儿...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) Vue作为当下前端最流行的框架之一,在国内占绝对的优势.所以接下来我们一起来学习它吧! 我不会像其它人 ...
“约见”面试官系列之常见面试题之第八十八篇之什么是vue生命周期（建议收藏）
我们知道vue是一个构建数据驱动的 web 界面的渐进式框架,那么vue生命周期是什么呢?本篇文章就给大家来介绍一下vue生命周期的内容,希望可以帮助到有需要的朋友. vue生命周期是什么? Vue生 ...
史上最全的Vue生命周期钩子函数11个
什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例: 在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这 ...
Vue生命周期及各组件间的执行情况
文章目录前言一.Vue的生命周期是什么? 二.Vue生命周期中具体过程 1.Vue生命周期中的函数创建Vue实例期阶段: 运行阶段: 销毁阶段: 2.加入keep-alive后 1)keep-a ...
生命周期用户可以操作dom_当面试官问：能否介绍下Vue生命周期时，该如何回答...
上一篇文章中我们讲到了Vue框架的概念以及选用Vue的优劣势.本篇文章将就Vue进行进一步介绍-Vue生命周期. 首先每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的(受MV ...
vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...

【Vue】生命周期中的八个钩子函数