vue使用总结-生命周期篇

工作之初使用的angularjs框架，从那时开始数据双向绑定的思想就深深的吸引了我。那是刚入门并没有深究angularjs实现双向绑定的原理。所以至今对angularjs也是一知半解。在工作半年左右接触了vue，开始使用它作为主要的开发框架。使用至今已有两年多了，期间也对其源码进行过研究。vue的各种理念也都比较了解。最近有空总结下自己对vue各个知识点的理解。

 vue生命周期示例图

上图描述了vue 的生命周期，下面我们根据此图来详细了解下vue从初始化到结束都做了些什么。

1. 创生created

 对vue熟悉的人都知道，vue是封装在vue的函数中的，

function Vue (options) {if (process.env.NODE_ENV !== 'production' &&!(this instanceof Vue)) {warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options)//初始化开始 } 复制代码

当我new vue时候，此时vue开始他的生命旅程。此时调用init函数，初始化vue的事件，props，methods，data，computed和watch **

2. 挂载mount

 数据初始结束后，如果可以找到el则开始挂载DOM元素。

 开始编译：此时判断是否有render函数，如果有就不做处理直接执行mount.call(this, el, hydrating)。如果没有render函数，则获取template，template可以是#id、模板字符串、dom元素，如果没有template，则获取el以及其子内容作为模板，然后开始编译模板，编译完成调用render函数生成DOM元素。现在我们可以看到页面显示的内容了。 

3. 更新update

页面绑定的数据修改后，更新dom结构，即vdom的diff算法。Vue和React在更新dom时，使用的算法相同，都是基于snabbdom。 update中最终要的一环便是数据patch，vue中调用patch方法来分析DOM元素的结构变化。下面简述下patch流程：

return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {... let isInitialPatch = false const insertedVnodeQueue = []if (isUndef(oldVnode)) { ... } else {// oldValue不是VNode，而是真实的dom元素 const isRealElement = isDef(oldVnode.nodeType)if (!isRealElement && sameVnode(oldVnode, vnode)) {//判断两个vnode可不可以复用为一个节点 // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)//执行patchVnode方法 } else {// } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm } 复制代码

  vue中的update是vue知识点中比较重要的知识，此生命周期中最重要的是diff算法。由于内容较多这里就不详述，有兴趣的小伙伴可以去了解下[vue源码分析](https://github.com/liutao/vue2.0-source/blob/master/patch%E2%80%94%E2%80%94diff.md) 

4. 结束destroy

任何事物有始必有终，vue当然也不例外。在vue中destroy用来结束他的生命周期，当离开当前组件时会自动触发destroy，当然我们也可以手动触发。 

手动销毁vue需要注意：destroy会完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。也就是说他不会删除页面的DOM元素。

转载于:https://juejin.im/post/5b9f15d9e51d450e827b1edb

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的vue使用总结-生命周期篇的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。