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等等。

  • 相关阅读:
    hihocoder 1049 后序遍历
    hihocoder 1310 岛屿
    Leetcode 63. Unique Paths II
    Leetcode 62. Unique Paths
    Leetcode 70. Climbing Stairs
    poj 3544 Journey with Pigs
    Leetcode 338. Counting Bits
    Leetcode 136. Single Number
    Leetcode 342. Power of Four
    Leetcode 299. Bulls and Cows
  • 原文地址:https://www.cnblogs.com/chuliang/p/10744716.html
Copyright © 2011-2022 走看看