欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实例化过程

程序员文章站 2022-07-02 12:25:08
我们在用vue进行开发项目时,是否存在疑惑,new Vue(xxx)的过程中,究竟发生了什么?定义的数据,是如何绑定到视图上的?本篇主要介绍在实例化vue时,主要做了哪些事,文章比较长,主要篇幅内容为数据初始化和数据视图绑定过程。主要代码执行时序图如下所示: 在vue源码中,vue构造函数的定义是在 ......

  我们在用vue进行开发项目时,是否存在疑惑,new vue(xxx)的过程中,究竟发生了什么?定义的数据,是如何绑定到视图上的?本篇主要介绍在实例化vue时,主要做了哪些事,文章比较长,主要篇幅内容为数据初始化和数据视图绑定过程。主要代码执行时序图如下所示:

  vue实例化过程

   在vue源码中,vue构造函数的定义是在/src/core/instance下,入口文件index.js中,定义了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)
}

  vue的构造方法接收一个参数options,options即我们实例化时定义的包含el,data,components等属性的对象,实例化时实际只执行vue初始化时已经在构造方法原型上定义的_init方法,_init实际代码如下所示:

 vue.prototype._init = function (options?: object) {
    const vm: component = this
    // a uid
    vm._uid = uid++
    let starttag, endtag
    /* istanbul ignore if */
    if (process.env.node_env !== 'production' && config.performance && mark) {
      starttag = `vue-perf-start:${vm._uid}`
      endtag = `vue-perf-end:${vm._uid}`
      mark(starttag)
    }

    // a flag to avoid this being observed
    vm._isvue = true
    // merge options
    // 合并属性,判断初始化的是否是组件
    if (options && options._iscomponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initinternalcomponent(vm, options)
    } else { // 合并vue属性
      vm.$options = mergeoptions(
        resolveconstructoroptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.node_env !== 'production') {
      // 初始化proxy拦截器
      initproxy(vm)
    } else {
      vm._renderproxy = vm
    }
    // expose real self
    vm._self = vm
    // 初始化组件生命周期标志位
    initlifecycle(vm)
    // 初始化组件事件侦听
    initevents(vm)
    // 初始化渲染方法
    initrender(vm)
    callhook(vm, 'beforecreate')
    // 初始化依赖注入内容,在初始化data、props之前
    initinjections(vm) // resolve injections before data/props
    // 初始化props/data/method/watch/methods
    initstate(vm)
    initprovide(vm) // resolve provide after data/props
    callhook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.node_env !== 'production' && config.performance && mark) {
      vm._name = formatcomponentname(vm, false)
      mark(endtag)
      measure(`vue ${vm._name} init`, starttag, endtag)
    }
    // 挂载元素
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

  从上述代码中,我们可以清晰的看到在vue的生命周期每个阶段具体做了什么事,比如:

  1. 我们在beforecreate中,是访问不到data数据的,mergeoptions是合并实例和mixins/extend上的数据,返回值vm.$options是合并后实例上的属性,data数据返回是一个function,因为属性data的合并策略是返回一个function,博文【浅析vue混入(mixins)】有具体的介绍。
  2. 在created时,我们并不能访问dom对象,因为此时模板文件还没有解析,还没有生成具体的dom元素,在created之前,只是对组件中的数据进行了初始化,具体的解析template和生成vnode,到生成真实dom挂载到页面上,在vm.$mount方法中一步步执行。

  用过vue的都知道,vue是数据驱动的一个框架,实现双向数据绑定是利用数据劫持,即object.defineproperty的get和set,在get中进行依赖收集,set中进行派发更新。但是数据是如何初始化的呢?以data为例,我们来看下vue是如何进行数据初始化的。

  如上述代码,在beforecreate后,会走进initstate方法,initstate中,会分别对props,methods,data和watch进行初始化,如下所示:

export function initstate (vm: component) {
  // 初始化组件的watcher列表
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initprops(vm, opts.props)
  if (opts.methods) initmethods(vm, opts.methods)
  if (opts.data) {
    // 初始化data
    initdata(vm)
  } else {
    observe(vm._data = {}, true /* asrootdata */)
  }
  if (opts.computed) initcomputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativewatch) {
    initwatch(vm, opts.watch)
  }
}

  我们暂且值看initdata,data在mergeoptions时,返回的是一个function,获取data数据,需要执行mergeoptions返回数据中的data方法,initdata代码如下所示:

function initdata (vm: component) {
  let data = vm.$options.data
  // 获取到组件上的data
  data = vm._data = typeof data === 'function'
    ? getdata(data, vm)
    : data || {}
  if (!isplainobject(data)) {
    data = {}
    process.env.node_env !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-must-be-a-function',
      vm
    )
  }
  // proxy data on instance
  const keys = object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.node_env !== 'production') {
      // 属性名不能与方法名重复
      if (methods && hasown(methods, key)) {
        warn(
          `method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    // 属性名不能与state名称重复
    if (props && hasown(props, key)) {
      process.env.node_env !== 'production' && warn(
        `the data property "${key}" is already declared as a prop. ` +
        `use prop default value instead.`,
        vm
      )
    } else if (!isreserved(key)) { // 验证key值的合法性
      // 将_data中的数据挂载到组件vm上,这样就可以通过this.xxx访问到组件上的数据
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  // 响应式监听data是数据的变化
  observe(data, true /* asrootdata */)
}

  getdata代码如下所示:

export function getdata (data: function, vm: component): any {
  // #7573 disable dep collection when invoking data getters
  pushtarget()
  try {
    // 调用在属性合并时,返回的data
    return data.call(vm, vm)
  } catch (e) {
    handleerror(e, vm, `data()`)
    return {}
  } finally {
    poptarget()
  }
}

  这里面有pushtarget/poptarget,这里主要是用于保证无论何时,执行的组件监听计算只有一个,这个具体后面再讨论。getdata的返回值就是合并后的data对象,赋值到当前的实例属性。接下来有个while循环,里面主要做三件事,

    第一,判断我们声明的data变量的合法性,我们声明变量的名称一定不要与methods或者props中的属性名重复,这也是许多新手容易犯的错误

    第二,声明变量的时候,不要用以_或者$开头的变量,这些可能会导致声明变量和vue私有变量冲突

    第三,将data中的变量代理到vm(组件实例)上,按照this的指向性原理,data对象中的this应该指向data,而不应该指向vm,这里做了一层封装代理,具体代码如下:

// 属性代理,从一个原对象中拿数据
export function proxy (target: object, sourcekey: string, key: string) {
  // 设置对象属性的get/set,将data中的数据代理到组件对象vm上
  sharedpropertydefinition.get = function proxygetter () {
    return this[sourcekey][key]
  }
  sharedpropertydefinition.set = function proxysetter (val) {
    this[sourcekey][key] = val
  }
  object.defineproperty(target, key, sharedpropertydefinition)
}

  接下来下一步所需要执行的内容就比较重要了,需要对data对象添加响应式侦听,调用observe方法,observe方法代码如下所示:

export function observe (value: any, asrootdata: ?boolean): observer | void {
  if (!isobject(value) || value instanceof vnode) {
    return
  }
  let ob: observer | void
  // 存在__ob__属性的一般为观察者对象的实例
  if (hasown(value, '__ob__') && value.__ob__ instanceof observer) {
    ob = value.__ob__
  } else if ( // object.isextensible 判断对象是否是可扩展的(可以添加新属性)
    shouldobserve &&
    !isserverrendering() &&
    (array.isarray(value) || isplainobject(value)) &&
    object.isextensible(value) &&
    !value._isvue
  ) { // 必须为数组 || 对象,才能实例化观察者对象
    ob = new observer(value)
  }
  if (asrootdata && ob) {
    ob.vmcount++
  }
  return ob
}

  每一个响应式对象,都会有__ob__属性,这个是vue中在声明响应式属性时定义的,如果没有该属性,数据的变化就不会被监测到,其他的可以暂时忽略,初始化响应对象是实例化了observe类,observer类的具体实现如下所示:

export class observer {
  value: any;
  dep: dep;
  vmcount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    this.value = value
    // 实例化一个发布-订阅模型
    this.dep = new dep()
    this.vmcount = 0
    // 给监听对象定义一个__ob__属性,属性值为this,指向当前实例
    // 存在该属性的对象,就是响应式对象
    def(value, '__ob__', this)
    // 数组类型
    if (array.isarray(value)) {
      // 存在原型 __proto__,重写数组原型上的方法
      if (hasproto) {
        protoaugment(value, arraymethods)
      } else {
        // 不存在原型,则在数组中复制重写后的数组方法
        copyaugment(value, arraymethods, arraykeys)
      }
      // 响应式监听数组的变化
      this.observearray(value)
    } else {
      // 如果值的类型为object,则响应式的声明对象属性
      this.walk(value)
    }
  }

  在实例化时,有两个分支,一个是数组,一个是对象,在实例化时,都会数据的中定义__ob__属性,值为当前观察者对象。我们先看对象的响应式声明方式,调用this.walk,具体代码如下:

  walk (obj: object) {
    const keys = object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      // 响应式定义对象属性的get set
      definereactive(obj, keys[i])
    }
  }

  definereactive是重点,添加对象属性的get/set,get和set中进行数据的劫持,实现代码如下:

export function definereactive (
  obj: object,
  key: string,
  val: any,
  customsetter?: ?function,
  shallow?: boolean
) {
  // 初始化一个发布-订阅模型,每个对象都包含一个dep实例
  const dep = new dep()
  // 获取属性描述符
  const property = object.getownpropertydescriptor(obj, key)
  // 对象的属性应该是可扩展、可配置的
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  // 处理obj的值
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  // 如果val值存在object,则需要侦听val值的变化
  let childob = !shallow && observe(val)
  object.defineproperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactivegetter () {
      const value = getter ? getter.call(obj) : val
      // 依赖收集 @todo
      if (dep.target) {
        dep.depend()
        if (childob) {
          childob.dep.depend()
          if (array.isarray(value)) {
            dependarray(value)
          }
        }
      }
      return value
    },
    set: function reactivesetter (newval) {
      // 派发更新 @todo
      // 获取到value数据
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newval === value || (newval !== newval && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.node_env !== 'production' && customsetter) {
        customsetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newval)
      } else {
        val = newval
      }
      // 重新更新下数据依赖
      childob = !shallow && observe(newval)
      // 通知数据更新???@todo
      dep.notify()
    }
  })
}

  任何数据的读取,都会走到get方法中,数据的更新,都会走get/set,其中在set中,dep.notify会派发更新页面数据,具体实现技术细节,在后续文章中,会进行详细描述。至此,data初始化工作算是完成了,数据的响应式原理核心利用dep和watcher两个类,后面文章专门详细描述vue的响应式原理及dep和watcher对象充当的角色和作用,本篇不做详细描述。

  数据初始化完成后,接下来需要做的就是解析template和挂载dom,在src\platforms\web\entry-runtime-with-compiler.js中,定义了$mount方法,具体如下所示:

vue.prototype.$mount = function (
  el?: string | element,
  hydrating?: boolean
): component {
  // 获取或查询元素
  el = el && query(el)

  /* istanbul ignore if */
  // vue 不允许直接挂载到body或页面文档上
  if (el === document.body || el === document.documentelement) {
    process.env.node_env !== 'production' && warn(
      `do not mount vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    // 存在template模板,解析vue模板文件
    if (template) {
      if (typeof template === 'string') {
        if (template.charat(0) === '#') {
          template = idtotemplate(template)
          /* istanbul ignore if */
          if (process.env.node_env !== 'production' && !template) {
            warn(
              `template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodetype) {
        template = template.innerhtml
      } else {
        if (process.env.node_env !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // 通过选择器获取元素内容
      template = getouterhtml(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.node_env !== 'production' && config.performance && mark) {
        mark('compile')
      }
      /**
       *  1.将temmplate解析ast tree
       *  2.将ast tree转换成render语法字符串
       *  3.生成render方法
       */
      const { render, staticrenderfns } = compiletofunctions(template, {
        outputsourcerange: process.env.node_env !== 'production',
        shoulddecodenewlines,
        shoulddecodenewlinesforhref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticrenderfns = staticrenderfns

      /* istanbul ignore if */
      if (process.env.node_env !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

  从上述方法中,我们能得到以下信息:

    1、不要将根元素放到body或者html上

    2、在vue中,可以在对象中定义template/render或者直接使用template、el表示元素选择器,用法比较灵活

    3、无论哪种写法,最终都会解析成render函数,调用compiletofunctions,会将template解析成render函数

  对template的解析步骤大致分为以下几步:

    1、将html文档片段解析成ast描述符

    2、将ast描述符解析成字符串

    3、生成render function

  如下图所示:

  template:

vue实例化过程

   ast:vue实例化过程

   function stringvue实例化过程

   生成render函数:

vue实例化过程

   生成render函数,挂载到vm上后,会再次调用mount方法,这个mount方法不是entry-runtime-with-compiler.js复写的这个,是vue原型上的方法在src\platforms\web\runtime\index.js中,里面会调用mountcomponent方法,具体如下:

// public mount method
vue.prototype.$mount = function (
  el?: string | element,
  hydrating?: boolean
): component {
  el = el && inbrowser ? query(el) : undefined
  // 渲染组件
  return mountcomponent(this, el, hydrating)
}

  src\core\instance\lifecycle.js

export function mountcomponent (
  vm: component,
  el: ?element,
  hydrating?: boolean
): component {
  vm.$el = el
  // 如果没有获取解析的render函数,则会抛出警告
  // render是解析模板文件生成的
  if (!vm.$options.render) {
    vm.$options.render = createemptyvnode
    if (process.env.node_env !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charat(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'you are using the runtime-only build of vue where the template ' +
          'compiler is not available. either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        // 没有获取到vue的模板文件
        warn(
          'failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  // 执行beforemount钩子
  callhook(vm, 'beforemount')

  let updatecomponent
  /* istanbul ignore if */
  if (process.env.node_env !== 'production' && config.performance && mark) {
    updatecomponent = () => {
      const name = vm._name
      const id = vm._uid
      const starttag = `vue-perf-start:${id}`
      const endtag = `vue-perf-end:${id}`

      mark(starttag)
      const vnode = vm._render()
      mark(endtag)
      measure(`vue ${name} render`, starttag, endtag)

      mark(starttag)
      vm._update(vnode, hydrating)
      mark(endtag)
      measure(`vue ${name} patch`, starttag, endtag)
    }
  } else {
    updatecomponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }
  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceupdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  // 监听当前组件状态,当有数据变化时,更新组件
  new watcher(vm, updatecomponent, noop, {
    before () {
      if (vm._ismounted && !vm._isdestroyed) {
        // 数据更新引发的组件更新
        callhook(vm, 'beforeupdate')
      }
    }
  }, true /* isrenderwatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._ismounted = true
    callhook(vm, 'mounted')
  }
  return vm
}

   这个方法中主要流程是:

    1、调用了beforemount钩子函数

    2、定义updatecomponent方法,是渲染dom的入口方法

    3、对vm添加监听,实例化一个watcher,然后调用updatecomponent方法

    4、调用mounted声明周期钩子,至此组件实例化结束

  watcher类如下所示:

export default class watcher {
  vm: component;
  expression: string;
  cb: function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: array<dep>;
  newdeps: array<dep>;
  depids: simpleset;
  newdepids: simpleset;
  before: ?function;
  getter: function;
  value: any;

  constructor (
    vm: component,
    exporfn: string | function,
    cb: function,
    options?: ?object,
    isrenderwatcher?: boolean
  ) {
    this.vm = vm
    // 是渲染的watcher @todo
    if (isrenderwatcher) {
      vm._watcher = this
    }
    // 将vm添加到组件的_watchers队列中
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
      this.before = options.before
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newdeps = []
    this.depids = new set()
    this.newdepids = new set()
    // updatecomponents
    this.expression = process.env.node_env !== 'production'
      ? exporfn.tostring()
      : ''
    // parse expression for getter
    if (typeof exporfn === 'function') {
      this.getter = exporfn
    } else {
      this.getter = parsepath(exporfn)
      if (!this.getter) {
        this.getter = noop
        process.env.node_env !== 'production' && warn(
          `failed watching path: "${exporfn}" ` +
          'watcher only accepts simple dot-delimited paths. ' +
          'for full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }

  /**
   * evaluate the getter, and re-collect dependencies.
   * 执行更新组件的方法,先将当前要执行的watcher推入到执行队列中 @todo
   */
  get () {
    pushtarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleerror(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      poptarget()
      this.cleanupdeps()
    }
    return value
  }

  看起来很长,其实主要就是调用在上述第二步声明的updatecomponent方法,updatecomponent方法主要执行在vue初始化时声明的_render,_update方法,其中,_render的作用主要是生成vnode,_update主要功能是调用__patch__,将vnode转换为真实dom,并且更新到页面中,具体如下:

// 定义vue 原型上的render方法
  vue.prototype._render = function (): vnode {
    const vm: component = this
    // render函数来自于组件的option
    const { render, _parentvnode } = vm.$options

    if (_parentvnode) {
      vm.$scopedslots = normalizescopedslots(
        _parentvnode.data.scopedslots,
        vm.$slots,
        vm.$scopedslots
      )
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentvnode
    // render self
    let vnode
    try {
      // there's no need to maintain a stack because all render fns are called
      // separately from one another. nested component's render fns are called
      // when parent component is patched.
      currentrenderinginstance = vm
      // 调用render方法,自己的独特的render方法, 传入createelement参数,生成vnode
      vnode = render.call(vm._renderproxy, vm.$createelement)
    } catch (e) {
      handleerror(e, vm, `render`)
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.node_env !== 'production' && vm.$options.rendererror) {
        try {
          vnode = vm.$options.rendererror.call(vm._renderproxy, vm.$createelement, e)
        } catch (e) {
          handleerror(e, vm, `rendererror`)
          vnode = vm._vnode
        }
      } else {
        vnode = vm._vnode
      }
    } finally {
      currentrenderinginstance = null
    }
    // if the returned array contains only a single node, allow it
    if (array.isarray(vnode) && vnode.length === 1) {
      vnode = vnode[0]
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof vnode)) {
      if (process.env.node_env !== 'production' && array.isarray(vnode)) {
        warn(
          'multiple root nodes returned from render function. render function ' +
          'should return a single root node.',
          vm
        )
      }
      vnode = createemptyvnode()
    }
    // set parent
    vnode.parent = _parentvnode
    return vnode
  }

  _render返回值: vue实例化过程

   _update:

 vue.prototype._update = function (vnode: vnode, hydrating?: boolean) {
    const vm: component = this
    const prevel = vm.$el
    const prevvnode = vm._vnode
    // 设置当前激活的作用域
    const restoreactiveinstance = setactiveinstance(vm)
    vm._vnode = vnode
    // vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevvnode) {
      // initial render
      // 执行具体的挂载逻辑
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeonly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevvnode, vnode)
    }
    restoreactiveinstance()
    // update __vue__ reference
    if (prevel) {
      prevel.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an hoc, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  }

  在挂载dom的过程中,是先添加新数据生成的节点,然后再移除老的节点。