zoukankan      html  css  js  c++  java
  • Vue源码之 Vue的生命周期

    天地初开就是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()的话是有的,后面的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等等。

  • 相关阅读:
    FineBI客户画像分析与客户价值模型快速入门
    大数据分析免费学习教程
    Xshell连接不上Ubuntu解决方式
    Jenkins时区设置为北京时间
    ASP.NET Core 与支付宝开发文档
    .NET Core 从 Github到 Nuget 持续集成、部署
    使用 dotnet cli 命令上传 nuget 程序包
    发布你的程序包到Nuget
    ASP.NET Core 判断请求是否为Ajax请求
    ASP.NET Core 如何在运行Docker容器时指定容器外部端口(docker compose)
  • 原文地址:https://www.cnblogs.com/chuliang/p/10744716.html
Copyright © 2011-2022 走看看