1.vue生命周期详解(2020.12.05)

vue生命周期，直接上官方图

补一下引用vue的链接( src = "https://cdn.bootcss.com/vue/2.4.2/vue.js)
要明确生命周期，我们必须从钩子下手：

beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed

为了方便观测，我们先输出一些数据，以此来明确钩子函数究竟做了什么。
首先我们来观测从一个实例开始到元素挂载前完成了什么的绑定

输出：

其实这个时候我们就很清晰的观察到了。

- beforeCreate：在创造前，我们实际上只是创造了一个vue的实例，也就是
表明着一个生命周期的开始。可以理解构造了一个空对象。

created 在创造后，我们发现我们的data以及其内容message都有了值。那么这一步就是创造前到创造后之间的生命周期，也就是（injections和reactivity直译过来就是注入和反应）

所以在这里给实例绑定上了data，这里有官方话来说就是【当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。】，所以我们页面被渲染了
beforeMount ，那么从实例被created->beforeMound之前，我们看输出就已经发现此时已经有el了，所以在这个时期，做了一件事就是绑定el，我们继续来看图

在created后，首先它会判断是否有el，如果有则进入下一步，如果没有，则会停止编译(停止生命周期)，直到被挂载上el为止才继续编译，紧接着，会判断是否有template选项，如果有，就将template编译进render函数里（在vue中有一个render函数，这跟react类似，返回dom并渲染）如果没有，就会以外部的html作为模板。

这下，就非常明确了吧，最通俗的来讲，优先级就是render>template>外部html，但是其本质都是，以render函数来返回并渲染dom节点的。
在这里之前，从 new Vue() -> beforeCreate->Created->beforeMount的生命周期就如上所述了。

紧接着，我们来看：
mounted ，这次我们直接上图
啥叫创造一个vm.$el然后替换掉el？，不是已经绑定了el吗，我们直接上代码

输出:

诶？我们可以看到，虽然挂载前，已经得到了dom节点，但是message的值还没有被更新，因为，此时dom元素还是以虚拟形式存在，这里有人就要问了啥是虚拟Dom，我引用别人的一张图来解释一下其过程

（是不是觉得非常熟悉，从我们之前创建的模板，到渲染函数render，再到现在的虚拟Dom树，最后要到真实的Dom），So，我们为啥要去搞一个虚拟Dom呢，简单来说，当ul下的一个li发生变化，如果我们直接用新ul的去代替旧的ul，就会造成很多不必要的dom操作(咱们要修改整个ul)，但是如果能够精确到找到哪一个li发生了变化，那我们是不是只需要去修改这一个li就可以了。所以我们生成了虚拟dom树，用新的li节点去跟旧的li节点作比较，找到真正需要更新的节点去更新就ok了。这样省了很多很多的操作。其实虚拟DOM在Vue.js主要做了两件事：

1.提供与真实DOM节点所对应的虚拟节点vnode
2.将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图

科普完，我们回归正传，所以在beforeMount->mounted之间的生命周期，咱们做的就是把虚拟的dom树映射到真实dom树上，所以看到，在挂载完成后，咱们的{{message}}变成了“生命周期”啦

来看：
到了整个生命周期最重要的地方了，

我们知道在挂载完初始的值后，接下来考虑的就是更新视图了，when data changes->创建虚拟dom树然后在映射到真实dom树上->完成updated，这个前文的虚拟dom树科普中已经介绍过了vue更新视图的顺序了，所以这里大家就能很快的理解啦，咱们直接上个代码，记住，只有数据更改后，才会触发update这个圈子

啥有没有–

触发组件更新啦- - - - - -

最后，when vm.$destroy() is called，要被销毁了，咱们就要进入beforeDestory和Destory，在before被销毁之前，咱这个实例就是完完全全正常存在的，当决定要被销毁了，就进入了
Teardown，也就是拆卸步骤了。监视器，子元素组件已经各种事件都要被解绑了，然后就是实例被销毁了。

综上所述，就是一个实例从诞生到被销毁的全部过程了。最后这里附上完整官方图

最后的最后感谢两篇博客
https://segmentfault.com/a/1190000011381906
https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html

这篇文章写了很长很长也很细很细，所以如果准备看我的这篇来学习vue的生命周期的朋友们，一定要跟着一步一步做下来，而不是cv，所以我的代码都是截图而不是直接贴上去，动手才是关键！！！！

偷张图总结一下

1.vue生命周期详解(2020.12.05)相关推荐

1.react生命周期详解(2020.12.05)
刚敲完vue的生命周期,现在来敲敲react的生命周期,当然生命周期只针对类组件(我很不常用类组件). raect生命周期(v16之前) initialization(初始化阶段) mounting( ...
vue 生命周期详解（附代码）
一. vue的生命周期是什么 vue每个组件都是独立的,都有自己的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,就是一个组件的生命周期. 一个组件首次加载时,也就只执行创建.数据初始化到挂 ...
vue 生命周期详解
详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
Vue系列之vue生命周期详解
文章の目录 1.什么是 vue 生命周期 2.生命周期钩子函数 2.1.beforeCreate(创建前) 2.2.created(创建后) 2.3.beforeMount(挂载前) 2.4.moun ...
Vue生命周期详解(图解)
程序员学习必备书籍推荐: 首先我们对Vue生命周期官方给出的图进行详细解释 vue生命周期详细图解什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整 ...
【Vue】 Vue生命周期详解
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期.在这个过程中,它经历了从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 通过这张流程图已经可以清晰的 ...
【Vue生命周期详解】
细谈Vue声明周期什么是生命周期? Vue的生命周期 beforeCreate( 创建前 ): created ( 创建后 ): beforeMount: mounted: beforeUpdate ...
Vue生命周期详解对应代码解析
-使用GitHub阅览对于Vue的实例,比如 const app = new Vue({...}) 浏览器解析到这段代码的时候,自动执行beforeCreate => created => ...
vue生命周期详解、钩子函数的调用（简单易懂）
定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程.期间会有8个钩子函数的调用. vue的钩子函数图解: vue的钩子函数使用总结: 1.beforeCreate(创建前):before ...

1.vue生命周期详解(2020.12.05)

vue生命周期，直接上官方图

1.vue生命周期详解(2020.12.05)相关推荐

最新文章

热门文章