Vue 데이터 컨트롤 뷰의 소스 코드 분석

이 글은 Vue 데이터 제어 뷰의 소스 코드 분석을 주로 소개합니다. 이제는 모든 사람과 공유합니다. 필요한 친구들이 참조할 수 있습니다.

Vue가 데이터 변경 사항을 구현하고 뷰를 업데이트하는 방법에 대한 분석 .

서문

3개월 전, 반응형 데이터를 구현하는 방법을 분석하기 위해 vue 소스 코드를 읽었습니다. 기사 이름은 vue 소스 코드 for 반응형 데이터입니다. Watcher의 update() 메서드가 호출됩니다. 그럼 3개월 후에 update()가 무엇을 하는지 계속 살펴보겠습니다. (지난 3개월 동안 React-Native를 사용하여 프로젝트를 수행했는데 요약할 생각이 없습니다. 너무 단순한 것 같습니다.

이 글의 설명 방법은 소스 코드를 보는 논리를 따르는 것입니다. 제가 확인한 vue 버전은 주석을 기록하기 위해 소스 코드의 복사본을 포크했습니다.

Purpose

조사 방향을 명확하게 해야만 Goal을 수행할 수 있습니다. 먼저 대상 동작에 대해 이야기해 보겠습니다. 데이터 변경 후 뷰를 업데이트하기 위해 어떤 메서드가 실행되는지 그런 다음 이 방향으로 시작할 준비를 하고 살펴보기 시작합니다.

이전 결론부터 시작하세요

먼저 검토해 보겠습니다. 이전 결론을 살펴보겠습니다.

vue가 구성되면 데이터에 Observer 객체가 생성됩니다( 및 기타 필드) getter와 setter는 종속성 수집을 트리거하고 setter는 알림을 트리거합니다.

다른 개체는 Watcher이며, watch 개체는 watch를 등록할 때 한 번 호출되어 getter를 트리거합니다. dep의 setter가 트리거되면 현재 Watcher에 알리고 Watcher의 update() 메서드를 호출합니다.

그런 다음 여기서는 렌더링 관련 Watcher를 등록하는 것부터 시작합니다. .

src/core/instance/lifecycle.js에서 파일을 찾았습니다.

new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)

mountComponent

이 메소드에서 렌더링 관련 Watcher가 mountComponent( )에 호출되는데, 이 메소드가 어디에 있는지 검색해 보겠습니다. 호출되는 곳은 src/platforms/web/runtime/index.js와 src/platforms/weex/runtime/index.js 두 곳뿐입니다. 웹을 예로 들면 다음과 같습니다.

Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && inBrowser ? query(el) : undefined
 return mountComponent(this, el, hydrating)
}

$mount () 메소드는 mountComponent()를 호출합니다(또는 vue 생성 중에 el 필드를 지정하면 자동으로 $mount() 메소드도 호출됩니다). 왜냐하면 web과 weex(weex란 무엇입니까? 이전에 다른 기사에서 소개한 바 있음) 렌더링 객체가 다르기 때문입니다. 따라서 게시할 때 다른 파일을 도입하고 최종적으로 다른 dist로 게시해야 합니다(이 문제는 나중에 vue의 전체 프로세스를 연구하기 위해 남겨 둡니다).

다음은 mountComponent 메서드입니다.

export function mountComponent (
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el // 放一份el到自己的属性里
 if (!vm.$options.render) { // render应该经过处理了, 因为我们经常都是用template或者vue文件
 // 判断是否存在render函数, 如果没有就把render函数写成空VNode来避免红错, 并报出黄错
 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 {
  warn(
   'Failed to mount component: template or render function not defined.',
   vm
  )
  }
 }
 }
 callHook(vm, 'beforeMount')

 let updateComponent
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 // 不看这里的代码了, 直接看else里的, 行为是一样的
 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
 // 注册一个Watcher
 new Watcher(vm, updateComponent, noop, null, 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
}

이 코드는 실제로 3가지 작업만 수행합니다.

• beforeMount 후크 호출

• Build a Watcher

• 마운트 후크 호출

(하하하) 실제로 핵심은 Watcher Now를 생성하는 것입니다.

Watcher의 매개변수를 살펴보세요. vm은 updateComponent는 함수이고, noop은 비어 있고, null은 비어 있으며, true는 RenderWatcher를 의미합니다.

Watcher의 isRenderWatcher를 살펴보았습니다:

if (isRenderWatcher) {
  vm._watcher = this
 }

예, 방금 복사했습니다. 하나는 watcher가 처음으로 패치할 때 무언가를 판단하는 데 사용됩니다.

아직 해결되지 않은 문제가 하나 있는데, 바로 updateComponent

updateComponent

가 Watcher 생성자의 두 번째 매개변수로 함수를 전달하는 것입니다. , 그러면 이 함수는 watcher의 getter가 됩니다. 똑똑하다면 뷰의 모든 데이터가 이 updateComponent에서 호출되어야 한다고 추측했을 것입니다. Getter는 뷰가 데이터 변경에 응답할 수 있도록 watcher에 종속성을 설정할 수 있습니다.

updateComponent = () => {
  vm._update(vm._render(), hydrating)
 }

그런 다음 vm._update() 및 vm._render()로 이동합니다.

src/core/instance/render.js에서 찾았습니다. _render() 메서드.

Vue.prototype._render = function (): VNode {
 const vm: Component = this
 const { render, _parentVnode } = vm.$options // todo: render和_parentVnode的由来

 // reset _rendered flag on slots for duplicate slot check
 if (process.env.NODE_ENV !== 'production') {
  for (const key in vm.$slots) {
  // $flow-disable-line
  vm.$slots[key]._rendered = false
  }
 }

 if (_parentVnode) {
  vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
 }

 // 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 {
  vnode = render.call(vm._renderProxy, vm.$createElement)
 } catch (e) {
  // catch其实不需要看了, 都是做异常处理, _vnode是在vm._update的时候保存的, 也就是上次的状态或是null(init的时候给的)
  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') {
  if (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
  }
  } else {
  vnode = vm._vnode
  }
 }
 // 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
 }
}

이 메서드는 다음을 수행합니다.

• VNode 생성 (render 메소드는 템플릿이나 vue 파일에서 컴파일할 수 있으므로 직접 render 메소드를 작성하는 것이 가장 효율적일 것으로 유추됩니다.)

• 문제가 있는 경우 render 메서드를 호출한 다음 먼저 renderError 메서드를 호출하고 실패하면 마지막 vnode 또는 null을 읽습니다.

• 부모 노드가 있으면 자체 .parent 속성에 넣습니다.

• 마지막으로 VNode로 반환됩니다.

핵심은 이 문장입니다:

vnode = render.call(vm._renderProxy, vm.$createElement)

render(), vm._renderProxy, vm.$createElement가 무엇인지 모르겠습니다.

vm._renderProxy를 먼저 살펴보겠습니다. initMixin()입니다. 설정되면 프로덕션 환경에서는 vm이 반환되고 개발 환경에서는 프록시가 반환되므로 디버깅할 수 있는 vm(즉, vm)이라고 생각합니다. vm에 대한 자세한 내용은 나중에 살펴보겠습니다. .$createElement 는 vdom 폴더에 있습니다. 다음은 VNode를 반환하는 방법입니다.

render는 좀 복잡합니다. 간단히 말해서 템플릿이나 vue 단일 파일을 구문 분석하고 마운트하는 것입니다.

간단한 요약: vm._render()의 반환 값은 VNode입니다. 현재 vm의 렌더링 함수에 따르면

vm._update()를 살펴보겠습니다

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
 const vm: Component = this
 if (vm._isMounted) {
  callHook(vm, 'beforeUpdate')
 }
 // 记录update之前的状态
 const prevEl = vm.$el
 const prevVnode = vm._vnode
 const prevActiveInstance = activeInstance
 activeInstance = vm
 vm._vnode = vnode
 // Vue.prototype.__patch__ is injected in entry points
 // based on the rendering backend used.
 if (!prevVnode) { // 初次加载, 只有_update方法更新vm._vnode, 初始化是null
  // initial render
  vm.$el = vm.__patch__( // patch创建新dom
  vm.$el, vnode, hydrating, false /* removeOnly */,
  vm.$options._parentElm,
  vm.$options._refElm
  )
  // no need for the ref nodes after initial patch
  // this prevents keeping a detached DOM tree in memory (#5851)
  vm.$options._parentElm = vm.$options._refElm = null
 } else {
  // updates
  vm.$el = vm.__patch__(prevVnode, vnode) // patch更新dom
 }
 activeInstance = prevActiveInstance
 // 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.
 }

about은 실제로 __patch() 부분입니다. __patch()는 dom에 대한 작업을 수행하여 첫 번째 호출인지 확인합니다. 그렇지 않은 경우 이전 노드와 새 노드를 전달합니다. 비교하고 운영해 보세요

결론

Vue의 뷰 렌더링은 Watcher의 특별한 종류입니다. 함수를 실행하는 프로세스는 렌더링 함수를 호출합니다(템플릿에는 일부 관찰된 데이터가 포함되어 있음). 따라서 템플릿에서 관찰된 데이터의 변경 사항은 Watcher의 update() 메서드를 트리거하여 뷰를 다시 렌더링합니다.

Legacy

렌더링 함수는 어디에 컴파일됩니까?
vue 소스 코드가 출시되면 다양한 플랫폼이 dist
__patch__ 생성 과정과 VNode 분석

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 중국사이트!

관련 권장 사항:

도메인 간 라우팅 충돌을 해결하기 위한 Vue의 아이디어에 대해

라우팅 매개 변수를 동적으로 설정하는 Vue의 소개에 대해

vue 가상 돔 패치 소스 코드 분석에 대해

위 내용은 Vue 데이터 컨트롤 뷰의 소스 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!