Vue源码之 Vue的生命周期

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue源码之 Vue的生命周期，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1627字，纯文字阅读大概需要3分钟。

内容图文

天地初开就是new Vue(options)，里面就一句话 this._init(options); （Vue.prototype.init 的赋值在initMixin(Vue)方法里）

_init方法里：

initInternalComponent 和mergeOptions方法是合并option这个另说。

initEvents是处理父组件（如果有）传递来的on事件

initRender很重要，主要是这一句 vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); }; 在vm实例上挂载一个_c方法，用处下面会讲到

initState很重要，处理我们在一个组件里定义的参数，比如props，computed，watch，data等。刚开始是initProps，就是把父组件（如果有）传递进来的值从propsData中取出来，绑定给自己的对应的props里的属性，reactive之后再挂在vm上（至于为什么父组件的属性能从自己的vm.$options.propsData中获取出来，这个下面会讲）。initMethods略，initData也简单，就是递归reactive，initComputed和initWatch别的文章另说。

再往下，if (vm.$options.el) {vm.$mount(vm.$options.el);}

这一段最重要，如果vue的参数里有el属性（el是准备挂载的节点，第一次的new Vue()的话是有的，后面的组件没有?），进入$mount方法，点进去看只有一句return mountComponent(this, el, hydrating)，但是这个方法后面被重写了，添加了一部分逻辑，添加的逻辑的作用是根据template（如果没有，根据el生成），生成render函数（里面有上面提到的_c），返回值是一个虚拟节点Vnode，

最后是mountComponent，新建一个render Watcher，expOrFn方法是vm._update(vm._render(), hydrating)（因为这个Watcher的lazy是false，所以会立即执行get方法，把自己推进栈顶，让被vm_render()引用到的属性收集依赖），

而接下来执行update方法，调用的是patch方法，把render生成的vnode和旧的对比，操作真实node，这个开篇另讲。

上面说的是创建周期

创建之后，就到了update更新周期，set方法导致vm._update这个方法被调用，把render生成的vnode和旧的对比，操作真实node等等。

内容总结

以上是互联网集市为您收集整理的Vue源码之 Vue的生命周期全部内容，希望文章能够帮你解决Vue源码之 Vue的生命周期所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---