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)

  if (vm.$options.el) { // 挂载实例
   vm.$mount(vm.$options.el);
  }

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

Vue.prototype.$mount = function(
 el"htmlcode">

import Vue from './runtime/index';
const mount = Vue.prototype.$mount; // 缓存 上面的 $mount 方法
Vue.prototype.$mount = function(
 el"htmlcode">

export function mountComponent(
 vm: Component,
 el: "htmlcode">

constructor(
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options"htmlcode">

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


也就是说updateComponent()方法被设置为了getter()方法
看到构造函数的最后


  this.value = this.lazy
   "htmlcode">

  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() 方法在 _update()函数中调用，这部不再重点说明。
下节我们将来说说render() 和 _update() 方法的实现
以上这篇vue $mount 和 el的区别说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

                                
                                

                                    vue,$mount,el 
                            
                        
                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        

                            

                                
                                    上一篇
                                    
JavaScript实现简单日历效果
                                
                            
                            

                                
                                    下一篇
                                    
JavaScript 判断数据类型的4种方法
                                
                            
                        
                        
                        

                            

                                
                                
                                    评论“vue $mount 和 el的区别说明”
                                
                            
                            

                                

                                    

                                        

                                            

                                                

                                                    
                                                
                                                

                                                    
                                                
                                                

                                                    

                                                    

                                                    

                                                
                                                

                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无评论...