이 글은 Vue 데이터 제어 뷰의 소스 코드에 대한 자세한 분석과 주석이 달린 핵심 사항을 제공합니다. 관심 있는 친구들은 참고할 수 있습니다.
Vue가 데이터 변경 사항을 구현하고 뷰를 업데이트하는 방법을 분석합니다.
서문
반응형 데이터를 구현하는 방법을 분석하기 위해 3개월 전에 Vue 소스 코드를 읽었습니다. 데이터가 변경된 후에는 Watcher의 update() 메서드가 호출될 것으로 분석되었으므로 3개월 후에 계속해서 update()가 무엇인지 살펴보겠습니다. (너무 단순해 보여서) 요약할 생각은 없습니다.
본 글의 서술 방식은 소스 코드를 보는 논리를 따르는 것입니다. 제가 확인한 vue 버전은 2.5.2입니다. 댓글을 기록하기 위해 소스 코드 복사본을 포크했습니다.
Purpose
조사 방향을 명확히 해야 목표에 도달할 수 있습니다. 먼저 대상 동작에 대해 이야기해 보겠습니다. 그런 다음 이 방향으로 vue 소스 코드의 입구부터 답을 찾을 준비를 하세요.
이전 결론부터 시작하세요
먼저 이전 결론을 검토해 보겠습니다.
vue가 구성되면 Observer 개체는 데이터(및 일부 다른 필드)에 생성되고 getter 및 setter가 가로채고 getter는 종속성 Collection을 트리거하고 setter는 알림을 트리거합니다.
다른 개체는 Watcher를 등록할 때 watch 개체가 한 번 호출됩니다. , 이는 watch 개체의 getter를 트리거하고 현재 Watcher의 deps에 대한 종속성을 수집합니다. 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가 무엇인지) 때문입니다. ? 이전에 다른 글에서 소개한 적이 있으므로 게시할 때 다른 파일을 소개해야 하며 최종 게시는 다르지 않습니다. (이 문제는 나중에 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 후크 호출
-
(하하하) 그러면 핵심은 실제로 Watcher를 생성하는 것입니다.
Watcher의 매개변수를 살펴보세요. vm은 이것이고, updateComponent는 함수이고, noop은 비어 있고, null은 비어 있으며, true는 RenderWatcher를 의미합니다.
Watcher에서 isRenderWatcher를 살펴보았습니다.
if (isRenderWatcher) {
vm._watcher = this
}로그인 후 복사
네, 와처가 처음 패치했을 때 판단하려고 카피를 만들어 놓은 것 뿐인데(댓글에서) 아직 무슨 용도인지는 모르겠습니다.
그러면 아직 풀리지 않은 문제가 하나 있습니다 , 이것이 바로 updateComponent입니다.
updateComponent
Watcher 생성자의 두 번째 매개변수에 함수가 전달되면 이 함수가 Watcher의 getter가 됩니다. 뷰의 모든 데이터는 이 updateComponent에서 호출되어야 합니다. 그래야 뷰가 데이터 변경에 응답할 수 있도록 감시자에서 종속성을 설정할 수 있습니다.
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를 생성합니다. current vm.(render 메소드는 템플릿이나 vue 파일에서 컴파일할 수 있으므로 직접 render 메소드를 작성하는 것이 가장 효율적이라고 추론합니다.)vnode = render.call(vm._renderProxy, vm.$createElement)
로그인 후 복사
vm._renderProxy를 먼저 살펴보겠습니다. initMixin() 중에 설정되고 프로덕션 환경에서 vm을 반환합니다. , 개발 환경이 에이전트를 반환하면 디버깅할 수 있는 VM(즉, vm)이라고 생각합니다. vm.$createElement의 코드는 vdom 폴더에 있습니다. VNode.
render는 좀 복잡한데, 나중에 공부해도 될까요? 간단히 말해서, 템플릿을 파싱하거나 단일 파일을 vue하고 대상을 render 함수에 마운트하는 것입니다.
간략한 요약: vm._render()의 반환 값은 현재 vm 함수의 렌더링에 따라 VNode입니다.
다음으로 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.
}로그인 후 복사
를 살펴보겠습니다. 우리가 관심 있는 부분은 실제로 __patch() 부분. __patch()는 dom에 대한 작업을 수행하고 _update()에 있는지 확인합니다. 그렇다면 첫 번째 호출입니다. 그렇지 않은 경우 이전 노드와 새 노드를 전달합니다. 비교하고 운영해 보세요
결론
Vue의 뷰 렌더링은 Watcher의 특별한 종류입니다. 함수를 실행하는 프로세스는 렌더링 함수를 호출합니다(템플릿에는 일부 관찰된 데이터가 포함되어 있음). 따라서 템플릿에서 관찰된 데이터의 변경 사항은 Watcher의 update() 메서드를 트리거하여 뷰를 다시 렌더링합니다.
Legacy
렌더링 함수는 어디에 컴파일됩니까?
vue 소스 코드가 출시되면 다양한 플랫폼이 소개되고 최종적으로 인쇄되었습니다. dist
__patch__를 만드는 과정과 VNode
에 대한 분석은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.
관련 기사:
Ajax 크로스 도메인(동일한 기본 도메인 이름) 양식 제출 방법
firefox 기반 Ajax 이미지 업로드
Ajax 로딩 외부 페이지 팝업 레이어 효과 구현 방법
위 내용은 Vue 데이터 제어 보기 소스 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
