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

  • 相关阅读:
    easyui-tree/combotree 子节点前端懒加载(主要解决ie11下加载慢
    解决 Chrome 下表单自动填充问题 (两种方法
    代码编辑器:本地JS文件上传并加载到页面
    PC端使用rem进行屏幕适配
    ECharts 点击非图表区域的点击事件不触发问题
    Angular2+ 使用 Post 请求下载文件
    Express + Element-ui 实现图片/文件上传
    phpMyAdmin -- 没有权限操作用户
    Note of Moment -- 日期处理
    Angular 自定义表单控件 -- CheckboxGroupComponent
  • 原文地址:https://www.cnblogs.com/chuliang/p/10744716.html
Copyright © 2011-2022 走看看