Vue 인스턴스를 어떻게 마운트하나요? 다음 문서에서는 Vue 인스턴스를 마운트하는 과정을 안내합니다. 도움이 되기를 바랍니다.
Vue2는 오랫동안 대중의 주목을 받았고, 심지어 Vue3도 사용하게 되었습니다. 대형 제조업체를 만나고 싶지 않더라도 누구나 Vue2에 대한 숙달을 점차 심화시켜야 합니다. 소스 코드 수준에 도달하도록 노력해야 합니다. Vue 인스턴스의 마운트 과정은 인터뷰에서 자주 등장하는 테스트 포인트입니다. 오늘은 소스코드를 기반으로 차근차근 분석해보도록 하겠습니다! (학습 영상 공유: vuejs 튜토리얼)
우리 모두는 Know what it is, Know Why 라는 말을 들어봤습니다.
이 프로세스에서 new Vue()
가 정확히 무엇을 하는지 생각해 본 적이 있는지 궁금합니다. new Vue()
这个过程中究竟做了些什么?
过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等。
首先找到Vue
的构造函数
源码位置: src/core/instance/index.js
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) }
options
是用户传递过来的配置项,如data、methods
等常用的方法。
Vue
构建函数调用_init
方法,但我们发现本文件中并没有此方法,但仔细可以看到文件下方定义了很多初始化方法。
initMixin(Vue); // 定义 _init stateMixin(Vue); // 定义 $set $get $delete $watch 等 eventsMixin(Vue); // 定义事件 $on $once $off $emit lifecycleMixin(Vue);// 定义 _update $forceUpdate $destroy renderMixin(Vue); // 定义 _render 返回虚拟dom
首先可以看到initMixin
方法,发现该方法在Vue
原型上定义了_init
方法。
源码位置: src/core/instance/init.js
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 // 合并属性,判断初始化的是否是组件,这里合并主要是 mixins 或 extends 的方法 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) } }
仔细阅读上面的代码,我们得到以下的结论:
beforeCreate
之前,数据初始化并未完成,像data
、props
这些属性无法访问到created
的时候,数据已经初始化完成,能够访问到data
、props
这些属性,但这时候并未完成dom
的挂载,因此无法访问到dom
元素。vm.$mount
方法initState
方法是完成 props/data/method/watch/methods
的初始化。
源码位置:src/core/instance/state.js
export function initState (vm: Component) { // 初始化组件的watcher列表 vm._watchers = [] const opts = vm.$options // 初始化props if (opts.props) initProps(vm, opts.props) // 初始化methods方法 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) } }
我们在这里主要看初始化data
的方法为initData
,它与initState
在同一文件上
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 */) }
仔细阅读上面的代码,我们可以得到以下结论:
props
、methods
、data
data
vm.$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) }
阅读上面代码,我们能得到以下结论:
body
或者html
上template/render
或者直接使用template
、el
表示元素选择器render
函数,调用compileToFunctions
,会将template
解析成render
函数对template
的解析步骤大致分为以下几步:
html
文档片段解析成ast
描述符ast
描述符解析成字符串render
函数生成render
函数,挂载到vm
上后,会再次调用mount
方法
源码位置:src/platforms/web/runtime/index.js
// public mount method Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && inBrowser ? query(el) : undefined // 渲染组件 return mountComponent(this, el, hydrating) }
调用mountComponent
渲染组件
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 = () => { // 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_render 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 }
阅读上面代码,我们得到以下结论:
beforeCreate
钩子updateComponent
渲染页面视图的方法beforeUpdate
生命钩子updateComponent
方法主要执行在vue
初始化时声明的render
, update
方法
render
的作用主要是生成vnode
源码位置:src/core/instance/render.js
// 定义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 }
_update
主要功能是调用patch
,将vnode
转成为真实DOM
,并且更新到页面中
源码位置:src/core/instance/lifecycle.js
2. 분석
Vue
의 생성자를 찾습니다🎜🎜소스 코드 위치: src/core/instance/index.js
🎜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. }🎜
옵션
은 데이터, 메소드
및 기타 일반적으로 사용되는 메소드와 같이 사용자가 전달하는 구성 항목입니다. 🎜🎜Vue
생성 함수는 _init
메서드를 호출하는데 이 파일에는 이 메서드가 존재하지 않는 것을 발견했지만, 자세히 살펴보면 파일 하단에 정의된 많은 초기화 방법. 🎜rrreee🎜먼저 initMixin
메서드를 볼 수 있고 이 메서드가 Vue
프로토타입의 _init
메서드를 정의한다는 것을 알 수 있습니다. 🎜🎜소스 코드 위치: src/core/instance/init.js
🎜rrreee🎜위 코드를 주의 깊게 읽으면 다음과 같은 결론을 얻을 수 있습니다. 🎜beforeCreate를 호출한 후
이전에는 데이터 초기화가 완료되지 않았으며 data
, props
등의 속성에 접근할 수 없습니다🎜생성
) >에 도달하면 데이터가 초기화되었으며 data
및 props
속성에 액세스할 수 있습니다. 그러나 dom
마운트가 완료되지 않았습니다. 현재로서는 dom
요소에 액세스할 수 없습니다. 🎜vm.$mount
메서드를 호출하는 것입니다. 🎜🎜🎜initState
메서드는 props/data/method/watch/를 완료하는 것입니다. 메소드
초기화. 🎜🎜소스 코드 위치: src/core/instance/state.js
🎜rrreee🎜여기서 주로 data
를 초기화하는 방법인 initData
를 살펴보겠습니다. code>입니다. initState
🎜rrreee🎜와 동일한 파일에 있습니다. 위 코드를 주의 깊게 읽으면 다음과 같은 결론을 얻을 수 있습니다.🎜props code>, <code>methods
, data
🎜data
를 정의할 때 함수 형식 또는 개체 형식을 선택할 수 있습니다(구성 요소는 함수에만 있을 수 있음). form)🎜🎜🎜데이터에 대하여 여기서는 응답성을 자세히 표시하지 않습니다.
위에서 언급했듯이 마운팅 방법은 vm.$mount
메서드를 호출하는 것입니다. 🎜🎜소스 코드: 🎜rrreee🎜위 코드를 읽으면 다음과 같은 결론을 얻을 수 있습니다. 🎜body
또는 html
🎜template/render
를 정의하거나 를 사용할 수 있습니다. >template
를 직접 사용합니다. el
은 요소 선택기 🎜render
함수로 구문 분석된다는 의미입니다. 템플릿
을 렌더링
함수로 구문 분석합니다. 🎜🎜🎜템플릿
을 구문 분석하는 단계는 대략 다음 단계로 나뉩니다. 🎜html
문서 조각을 파싱하여 ast
설명자로 파싱🎜ast
설명자를 문자열로 파싱🎜렌더 생성
함수🎜🎜🎜render
함수를 생성하고 vm
에 마운트한 후 mount
메서드를 다시 호출합니다🎜🎜소스 코드 위치: src/platforms/web/runtime/index.js
🎜rrreee🎜mountComponent
를 호출하여 구성 요소를 렌더링합니다🎜rrreee🎜위 코드를 읽으면 다음과 같은 결론을 얻을 수 있습니다. 🎜beforeCreate code>Hook을 트리거합니다🎜<li>페이지 보기를 렌더링하기 위해 <code>updateComponent
메소드를 정의합니다🎜beforeUpdate
라이프 후크를 트리거하세요🎜🎜🎜 updateComponent
메서드는 주로 render
및 update
메서드를 실행합니다 🎜🎜 vue
초기화 중에 선언된 render
주요 기능은 vnode
🎜🎜소스 코드 위치: src/core/instance/render를 생성하는 것입니다. js
🎜rrreee🎜_update
주요 기능은 patch
를 호출하고 vnode
를 실제 DOM
으로 변환하는 것입니다. , 페이지🎜🎜소스 코드 위치: src/core/instance/lifecycle.js
🎜로 업데이트하세요.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. }
new Vue
的时候会调用_init
方法$set
、$get
、$delete
、$watch
等方法$on
、$off
、$emit
、$off
等事件_update
、$forceUpdate
、$destory
生命周期$mount
进行页面的挂载mountComponent
方法updateComponent
更新函数render
生成虚拟DOM
_update
将虚拟DOM
生成真实DOM
结构,并且渲染到页面中위 내용은 Vue 인스턴스를 마운트하는 방법은 무엇입니까? 인스턴스 마운팅 과정에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!