vue$mount와el의 차이점 설명

둘 다 사용 효과에 있어서 아무런 차이가 없습니다. 모두 실례화된 vue를 지정한dom 요소에 마운트하기 위해서입니다.
만약에 vue를 실례화할 때 el을 지정하면 이 vue는 이 el에 대응하는dom에 렌더링됩니다. 반대로, el을 지정하지 않으면 vue 실례는 "마운트하지 않음"상태입니다. $mount를 통해 마운트를 수동으로 실행할 수 있습니다.
참고: $mount에서 매개 변수를 제공하지 않으면 템플릿이 문서 이외의 요소로 렌더링되고 원래 DOM API를 사용하여 문서에 삽입해야 합니다.
예:

var MyComponent = Vue.extend({
 template: '<div>Hello!</div>'
})

//   #app (  #app)
new MyComponent().$mount('#app')

//  
new MyComponent({ el: '#app' })

//  ， 
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

보충 지식: Vue 인스턴스 마운트 방법($mount)의 구현
Vue에서의_init 방법에서 beforeCreate와created 두 개의 생명주기 갈고리를 리셋하였으며, 그 후에 실례적인 마운트를 진행하였다

  if (vm.$options.el) { //  
   vm.$mount(vm.$options.el);
  }

마운트 함수에서 beforeMount와 mounted의 리셋을 진행합니다.
서로 다른 플랫폼에서 $mount 함수의 실현에 차이가 있다. 다음은 웹 플랫폼의runtime-with-compiler 버전을 고려하고 웹 플랫폼에서의 정의는 다음과 같다(src/platforms/web/runtime/index.js)

import { mountComponent } from 'core/instance/lifecycle';

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

$mount 함수의 매개 변수 중 첫 번째는 우리 속성의el이고, 두 번째 매개 변수는 서버 렌더링과 관련이 있으며,patch 함수에서 사용됩니다. 무시할 수 있습니다.
그러나 이 $mount 함수를 호출할 때, 먼저 다른 버전의 $mount 함수를 호출한 다음, 이 함수에서 해당 플랫폼의 $mount 함수를 호출합니다. 아래는runtime-with-compiler 버전에서 $mount 함수는 다음과 같습니다. (src/platforms/web/entry-runtime-with-compiler.js)

import Vue from './runtime/index';
const mount = Vue.prototype.$mount; //     $mount  
Vue.prototype.$mount = function(
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && query(el);

 //   body   html  
 if (el === document.body || el === document.documentElement) {   
  return this;
 }

 const options = this.$options;

 if (!options.render) { //   render  
  // ...   render   options  
   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;
  // ...
 }
 
 return mount.call(this, el, hydrating);
};

이 함수는 주로 세 가지 일을 했다는 것을 알 수 있다
1. 마운트 후 마운트된 대상을 교체하기 때문에 바디와 html에 마운트할 수 없음 제한
2. 현재 Vue 실례에 render () 함수 (template 등 쓰기) 가 없으면 컴파일 등을 통해 render 함수를 options에 추가합니다
3. 코드 시작에 우리가 먼저 캐시하는 $mount 방법을 호출합니다. 이 방법은 웹 플랫폼 아래의 방법입니다.
웹 플랫폼 아래의 $mount 방법에서 주로 mountComponent () 방법을 호출했습니다. 다음은 우리의 핵심이 바로 이 방법입니다.
'core/instance/lifecycle.js 파일에서 우리는 이 방법의 정의를 찾았고, 일부 비중점 코드를 삭제한 후 다음과 같다.

export function mountComponent(
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el;
 if (!vm.$options.render) { 
  //  ，  render  
 }
 callHook(vm, 'beforeMount'); //   beforeMount ,  

 //       （ performance ， ） 
 const updateComponent = updateComponent = () => {
   vm._update(vm._render(), hydrating);
 };

 // new   Watcher [isRenderWatcher]
 new Watcher(vm, updateComponent, noop, {
  before() {
   if (vm._isMounted && !vm._isDestroyed) {
    callHook(vm, 'beforeUpdate');
   }
  },
 }, true /* isRenderWatcher */);
 hydrating = false;

 // Vue   mounted  
 if (vm.$vnode == null) {
  vm._isMounted = true;
  callHook(vm, 'mounted');
 }
 
 return vm;
}

위의 코드에서 주로 다음과 같은 세 가지 일을 했다
1. beforeMount 리셋
2. vnode를 실제 DOM으로 렌더링하는 updateComponent 생성 방법
3. new 하나의 Watcher, 이 Watcher에서 updateComponent 방법을 호출합니다
4. mounted 리셋
updateComponent 방법이 비교적 복잡하고 그 내부의 주요 호출_업데이트 () 브라우저에 표시되는 실제 DOM으로 vnode 렌더링
우리는 아래와 같은 두 가지 문제를 고려한다
1. Watcher에서 updateComponent 메서드를 호출하는 방법
Watcher 함수의 구조 함수는 다음과 같은 매개 변수를 받아들인다

constructor(
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: ?Object,
  isRenderWatcher?: boolean
 )

위의 코드에서 updateComponent() 방법은 두 번째 매개 변수로 전달됩니다. 즉, 구조 함수의 expOrFn
내려다보면 보여요.

  if (typeof expOrFn === 'function') {
   this.getter = expOrFn;
  }

즉, updateComponent () 방법이 getter () 방법으로 설정됨
구조 함수의 마지막을 보다

  this.value = this.lazy
   ? undefined
   : this.get();

그중에서lazy 속성의 값은false로 설정되어 있습니다
this.lazy = !!options.lazy;//저희 옵션에lazy 속성이 없어요.
이것은 i구조 함수의 끝부분에this를 호출하는 방법을 말한다.get (), 그리고this.get () 중

  const vm = this.vm;
  try {
   value = this.getter.call(vm, vm);
  }

getter () 방법, 즉 updateComponent () 방법을 호출한 것을 보았습니다.
2. 루트 인스턴스의 $vnode가 비어 있는 이유
initRender() 함수에 다음 코드가 있습니다.
const parentVnode = vm.$vnode = options._parentVnode;
즉, 현재 실제 $vnode 값은 부모 노드의 vnode 값입니다.
루트 실례는 부모 노드가 없기 때문에 $vnode 값이 비어 실행됩니다.

 if (vm.$vnode == null) {
  vm._isMounted = true;
  callHook(vm, 'mounted');
 }

그러면 하위 노드의 mounted 리셋은 거기서 실행됩니까?
path()(core/vdom/patch.js) 함수에 다음과 같은 코드가 있습니다

 function invokeInsertHook(vnode, queue, initial) {
  if (isTrue(initial) && isDef(vnode.parent)) {
   vnode.parent.data.pendingInsert = queue;
  }
  else {
   for (let i = 0; i < queue.length; ++i) {
    queue[i].data.hook.insert(queue[i]); //  
   }
  }
 }

queue를 순환할 때 insert () 방법을 사용했습니다. 이 방법은 VNodeHooks입니다. 이것은componentVNodeHooks(core/vdom/create-component.js)에서 설명합니다. 코드는 다음과 같습니다.

const componentVNodeHooks = {
 insert(vnode: MountedComponentVNode) {
  const { context, componentInstance } = vnode;

  if (!componentInstance._isMounted) {
   componentInstance._isMounted = true;
   callHook(componentInstance, 'mounted'); //  
  }
  if (vnode.data.keepAlive) {
   if (context._isMounted) {
    queueActivatedComponent(componentInstance);
   }
   else {
    activateChildComponent(componentInstance, true /* direct */);
   }
  }
 },
}

path () 메서드는 _업데이트 () 함수에서 호출됩니다. 이것은 더 이상 중점적으로 설명하지 않습니다.
다음 절에서render()와_업데이트 () 방법의 실현
이상의 vue$mount와 엘의 차이점은 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.