欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue $mount 和 el的區(qū)別說明

 更新時間:2020年09月11日 08:35:55   作者:Daniel丶云煥  
這篇文章主要介紹了vue $mount 和 el的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

兩者在使用效果上沒有任何區(qū)別,都是為了將實例化后的vue掛載到指定的dom元素中。

如果在實例化vue的時候指定el,則該vue將會渲染在此el對應(yīng)的dom中,反之,若沒有指定el,則vue實例會處于一種“未掛載”的狀態(tài),此時可以通過$mount來手動執(zhí)行掛載。

注:如果$mount沒有提供參數(shù),模板將被渲染為文檔之外的的元素,并且你必須使用原生DOM API把它插入文檔中。

例如:

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

// 創(chuàng)建并掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')

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

// 或者,在文檔之外渲染并且隨后掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

補(bǔ)充知識:Vue 實例掛載方法($mount)的實現(xiàn)

在 Vue 的 _init 方法中已經(jīng)回調(diào)了beforeCreate 和created這兩個生命周期鉤子,在此之后就進(jìn)行了實例的掛載

  if (vm.$options.el) { // 掛載實例
   vm.$mount(vm.$options.el);
  }

在掛載函數(shù)中,將要進(jìn)行 beforeMount 和 mounted 的回調(diào)。

在不同的平臺下對于 $mount 函數(shù)的實現(xiàn)是有差異的,下面考慮 web 平臺的 runtime-with-compiler 版本 , 其在web平臺下的定義如下(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函數(shù)的參數(shù)中,第一個為我們屬性的el, 第二個參數(shù)為服務(wù)端渲染有關(guān),在patch函數(shù)中用到,這里可以忽略。

但是在調(diào)用這個$mount函數(shù)的時候,首先調(diào)用的是不同版本下的$mount函數(shù),然后在該函數(shù)中再調(diào)用相應(yīng)平臺的$mount函數(shù),如下在 runtime-with-compiler 版本中$mount函數(shù)如下(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 函數(shù)
  // ... 將 render 函數(shù)添加到 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);
};

可知該函數(shù)主要干了三件事

1、由于掛載之后會替換被掛載的對象,所以限制不能掛載到 body 和 html 上

2、如果當(dāng)前Vue實例沒有 render() 函數(shù)(寫template等),則通過編譯等手段,將render函數(shù)添加到 options 上

3、調(diào)用在代碼開頭我們先緩存的$mount方法,該方法就是web平臺下的方法。

在web平臺下的$mount方法里面主要就是調(diào)用了mountComponent() 方法,接下來我們的核心就是該方法了

在'core/instance/lifecycle.js 文件中我們找到了該方法的定義,刪掉一些非重點代碼后如下

export function mountComponent(
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el;
 if (!vm.$options.render) { 
  // 不是重點,該處主要是用來對沒有 render 函數(shù)下的一些錯誤提示
 }
 callHook(vm, 'beforeMount'); // 回調(diào) beforeMount , 開始準(zhǔn)備掛載實例

 // 聲明 更新組件 的函數(shù) (源代碼中有關(guān)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 回調(diào)在這里執(zhí)行
 if (vm.$vnode == null) {
  vm._isMounted = true;
  callHook(vm, 'mounted');
 }
 
 return vm;
}

上面的代碼中主要干了如下三件事

1、回調(diào) beforeMount

2、生成 updateComponent 方法,該方法將 vnode 渲染為真實的DOM

3、new 一個 Watcher ,并在該 Watcher在調(diào)用updateComponent方法

4、回調(diào) mounted

對于 updateComponent方法較為復(fù)雜,其內(nèi)部主要調(diào)用_update()將 vnode渲染為瀏覽器上顯示的真實DOM

我們考慮如下兩個問題

1. Watcher 中如何調(diào)用 updateComponent方法

Watcher 函數(shù)的構(gòu)造函數(shù)接受如下的參數(shù)

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

在上面的代碼中,updateComponent()方法作為第二個參數(shù)傳遞過來,即構(gòu)造函數(shù)中的expOrFn

往下看會看到

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

也就是說updateComponent()方法被設(shè)置為了getter()方法

看到構(gòu)造函數(shù)的最后

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

其中 lazy 屬性的值在前面被設(shè)置為了 false

this.lazy = !!options.lazy; // 我們 options 中沒有 lazy 屬性

這也就是說,咋i構(gòu)造函數(shù)的末尾會調(diào)用this.get(),而在this.get()中

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

我們看到調(diào)用了getter()方法,也就是調(diào)用了updateComponent()方法。

2. 為什么根實例的$vnode為空

在initRender()函數(shù)中有如下代碼

const parentVnode = vm.$vnode = options._parentVnode;

也就是說 當(dāng)前實際的 $vnode 值為其父節(jié)點的vnode值

而根實例沒有父節(jié)點,故其$vnode值就為空了,所以會執(zhí)行

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

那么子節(jié)點的mounted回調(diào)是在那里執(zhí)行的呢?

在 path()(core/vdom/patch.js) 函數(shù)中有如下代碼

 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]); // 這里
   }
  }
 }

在循環(huán)queue的時候,調(diào)用了 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()函數(shù)中調(diào)用,這部不再重點說明。

下節(jié)我們將來說說render() 和 _update() 方法的實現(xiàn)

以上這篇vue $mount 和 el的區(qū)別說明就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • el-select 下拉框多選實現(xiàn)全選的實現(xiàn)

    el-select 下拉框多選實現(xiàn)全選的實現(xiàn)

    這篇文章主要介紹了el-select 下拉框多選實現(xiàn)全選的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Element-UI中el-table如何合并相同單元格

    Element-UI中el-table如何合并相同單元格

    這篇文章主要給大家介紹了關(guān)于Element-UI中el-table如何合并相同單元格的相關(guān)資料,el-table的組件的可以合并單元格,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • Vant 中的Toast設(shè)置全局的延遲時間操作

    Vant 中的Toast設(shè)置全局的延遲時間操作

    這篇文章主要介紹了Vant 中的Toast設(shè)置全局的延遲時間操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue2.0 和 animate.css的結(jié)合使用

    vue2.0 和 animate.css的結(jié)合使用

    animate.css是一款前端動畫庫,相似的有velocity-animate。這篇文章給大家介紹vue2.0 和 animate.css的結(jié)合使用,需要的朋友參考下吧
    2017-12-12
  • Vue生命周期函數(shù)調(diào)用詳解

    Vue生命周期函數(shù)調(diào)用詳解

    這篇文章主要介紹了Vue生命周期函數(shù)調(diào)用詳解,本文將實現(xiàn)Vue生命周期相關(guān)代碼的核心邏輯,從源碼層面來理解生命周期,感興趣的小伙伴可以參考一下
    2022-08-08
  • vue3使用el-table實現(xiàn)新舊數(shù)據(jù)對比的代碼詳解

    vue3使用el-table實現(xiàn)新舊數(shù)據(jù)對比的代碼詳解

    這篇文章主要為大家詳細(xì)介紹了在vue3中使用el-table實現(xiàn)新舊數(shù)據(jù)對比,文中的示例代碼講解詳細(xì),具有一定的參考價值,需要的小伙伴可以參考一下
    2023-12-12
  • Vue2 Vue-cli中使用Typescript的配置詳解

    Vue2 Vue-cli中使用Typescript的配置詳解

    Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星,足以說明其以悄然成為主流。下面這篇文章主要給大家介紹了關(guān)于Vue2 Vue-cli中使用Typescript的配置的相關(guān)資料,需要的朋友可以參考下。
    2017-07-07
  • vue中$refs的用法及作用詳解

    vue中$refs的用法及作用詳解

    這篇文章主要介紹了vue中$refs的用法及作用詳解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • Proxy中代理數(shù)據(jù)攔截的方法詳解

    Proxy中代理數(shù)據(jù)攔截的方法詳解

    這篇文章主要為大家詳細(xì)介紹了Proxy中代理數(shù)據(jù)攔截的方法,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)或工作具有一定的借鑒價值,需要的可以參考一下
    2022-12-12
  • buildAdmin開源項目引入四種圖標(biāo)方式詳解

    buildAdmin開源項目引入四種圖標(biāo)方式詳解

    這篇文章主要為大家介紹了buildAdmin開源項目引入四種圖標(biāo)方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02

最新評論