Vue生命周期(个人理解)
source link: https://blog.csdn.net/nanyangnongye/article/details/122796826
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
描述：今天进度到生命周期 other-teacher只讲了两个项目使用到的生命周期 剩下的自己扩展，哎，自己来了兴趣，为啥，自己第一次面试的时候记得很清楚。面试官：“简单说一下你对vue生命周期的个人理解” 我:语塞(第一次)，第二次说完周期名字之后就不知道怎么说个人理解了，所以这次很想搞搞清楚
英文官网：Vue.js
中文官网：Vue.js
https://blog.csdn.net/nanyangnongye/article/details/122796987
本次练习演示需要用到主要的vue知识点有
插值表达式 {{value}}
双向数据绑定指令 v-model
一些基本语法 vue.js引入、vue实例创建、el： data：等等不在过多赘述 如果有看不明白的朋友可直接官网查看 或者B站视频学习，也可以找我要笔记
官网生命周期图
**mounted**表示vue实例挂载完成；
**beforeUpdate**在data数据被改变后触发
**updated**表示更新DOM完成
**beforeDestroy -**--实例销毁之前调用
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用
这个图 大眼扫去有两个目的 生命周期的执行顺序、执行条件、以及执行名称及周期名(官话生命周期钩子)
新建生命周期.html 并将准备工作进行创建
然后 新建周期函数 所有的 为了测试周期的执行顺序是否跟创建位置有关系 本次函数将无序创建
然后右键运行F12查看周期
然后回到VS Code页面 将el: '#app', 代码删除 刷新页面再次查看
到这里我们可以得出的结论就是
1. 当创建new Vue的那一刻起生命周期将按照顺序执行beforeCreate、created生命周期
2. 当el: '#app'挂载代码存在时 生命周期将按照顺序执行beforeCreate、created、beforeMount、mounted 生命周期
3.生命周期的执行顺序跟函数代码创建的顺序无关
好 继续 先写一个插值表达式 将页面 变一下
没有变化 继续 写一个文本框 通过v-model 双向数据绑定
<input type="text" v-model="message" />当浏览器中data数据发生改变的时候 生命周期会按照顺序执行beforeUpdate、updated生命周期
那么最后一个生命周期怎么执行显示出来呢 见词知意 销毁嘛
var vm = new Vue({先将Vue实例定义一个对象名
然后回到浏览器端进行测试
这里会有两步操作
OK 实战中并没有对生命周期太多的解释说明 而是以代码的形式进行验证 从头到尾之后 再来看这张图 是不是有一种不同第一次看的时候的感觉！ 如果面试官再问Vue的生命周期 是不是就不怕了
最后，祝福看到最后的小伙伴2022鸿运当头
Recommend
-
61
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 一、生命周期钩子函数 beforeCreate c...
-
10
Vue 3.0 上手（二）高级 API 及生命周期的上手 上一次学习了基础的 API ，这次学习一些高级一点的 API。 Vue 初始化变化（上一篇章遗漏了）原来的写法是： 123
-
9
手写Vue源码(四) - 生命周期夏日Enjoy what you are doing! 源码地...
-
10
Vue 3 生命周期完整指南 作者：Michael Thiessen 译者：前端小智 来源：news 点赞再看，微信搜索 【
-
8
生命周期(Life Cycle) 是指一个组件从 创建 => 运行 => 销毁 的整个阶段; 强调的是一个时间段.生命周期函数: 是由Vue框架提供的内置函数,会...
-
9
Vue实例的生命周期官网生命周期图示
-
8
我记得尤大曾经说过，你看Vue源码干嘛？你使用Vue又不需要它的源码，你只需要会用就行了！ 但是我们得卷啊，不卷怎么脱颖而出😥，我还记得在今年的蓝桥杯群里，有一同届的还不知道哪个大学的哥们，已经在读Vue/React/Node的源码了.....作为小菜鸡的我...
-
5
CHEGVA让我们面对现实 让我们忠于理想 ☰ 分类目录 ♚ 大家正在看...
-
1
-
11
随着2024年即将到来，我们借此机会提醒vue社区，Vue 2将于2023年12月31日终止更新（EOL）。Vue 2.0在7年多前的2016年发布。它是Vue成为主流
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK