Vue官方文檔Vue.extend、Vue.component、createElement、$attrs/$listeners、插槽的深入理解

一、Vue.extend({})。

看官網文檔介紹，Vue.extend({})返回一個Vue的子類，那么這個Vue子類是啥玩意兒呢？我直觀感覺它就是創建出一個組件而已啊，那么它又和Vue.component({})不就重復了嗎，有啥區別呢？

參考文章如下：

用法：使用Vue構造器，創建一個“子類”，參數是一個包含組件選項的對象，其中,data選項中必須是函數

描述：Vue.extend返回的是一個“擴展實例構造器”，也就是預設了部分選項的Vue的實例構造器，它常常服務於Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生產組件實例，並掛在到自定義元素上

需要手動掛載，可以掛載到自定義元素上，元素的標識可以是id，也可以是class如：

var author = Vue.extend({
  template: "<p><a :href='url'>{{author}}</a></p>",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  }
});

以上代碼片段摘自https://blog.csdn.net/dear_mr/article/details/72627214，但是我試驗的時候，提示實例化的變量名首字母要大寫，所以要var Author = 。。。

<div id="author" class="author"></div>，可以這樣掛載：new Author().$mount('#author'),也可以這樣掛載new Author().$mount('.author');

如果文檔中沒有直接掛載的元素，也可以這樣，先let author = new Author().$mount(),然后再document.querySelector('#el').appendChild(author.$el),這樣就把實例插入到文檔中了，其中$el其實就是template變成DOM之后的東東。

如果，構造的東西里面需要傳屬性值，則只需在new的時候通過propsData來傳入。

var author = Vue.extend({
  template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  },
  props : ['name']
});

new author({propsData: {name : 'dear_mr'}}).$mount('#author');

 參考自：https://blog.csdn.net/dear_mr/article/details/72627214

二、Vue.component({})。

創建並注冊組件，組件的options跟Vue實例的選項大體一致，但是data得用function的形式，data(){return {}}。

三、Vue原生模板渲染函數CreateElement。

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標簽名、組件選項對象，或者
  // resolve 了上述任何一種的一個 async 函數。必填項。
  'div',

  // {Object}
  // 一個與模板中屬性對應的數據對象。可選。
  {
    // (詳情見下一節)
  },

  // {String | Array}
  // 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成，
  // 也可以使用字符串來生成“文本虛擬節點”。可選。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

　　首先，CreateElement函數返回的是VNode虛擬DOM對象，函數第一個參數可以是字符串(一般是標簽名)、對象(組件選項對象)、函數(返回上述兩項或者promise resolve之后返回上述兩項)。

第二個參數是該組件的數據對象，該數據對象可以有以下選項：

{
  // 與 `v-bind:class` 的 API 相同，
  // 接受一個字符串、對象或字符串和對象組成的數組
  'class': {
    foo: true,
    bar: false
  },
  // 與 `v-bind:style` 的 API 相同，
  // 接受一個字符串、對象，或對象組成的數組
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 組件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 屬性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件監聽器在 `on` 屬性內，
  // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
  // 需要在處理函數中手動檢查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅用於組件，用於監聽原生事件，而不是組件內部使用
  // `vm.$emit` 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
  // 賦值，因為 Vue 已經自動為你進行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式為
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果組件是其它組件的子組件，需為插槽指定名稱
  slot: 'name-of-slot',
  // 其它特殊頂層屬性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函數中給多個元素都應用了相同的 ref 名，
  // 那么 `$refs.myRef` 會變成一個數組。
  refInFor: true
}

這里面的slot屬性，着實讓我廢了一番周折，看它介紹是如果有父組件，父組件中有slot，它就指定了父組件的slot，結果我把它放到帶slot的組件中時，發現根本不會替換，然后反復折騰，才發現，它是需要環境的，比如可以這樣用：

 HTML：

<test>
   <template slot="child">11111</template>
   <span>22222</span>
</test>

JS:

export default Vue.component('test', {
  render: function (createElement) {
    let child = createElement('div', {slot: 'child',
      attrs: {
        id: 'child'
      }}, '我是child')
    return createElement('div', [child, this.$slots.default])
  }
})　

這樣的話，相當於child在渲染時，會占據div的slot="child"的插槽。而對於test來講，即return 的這個createElement,添加slot好像沒有效果，或者說拿它去放到現成的帶有slot的組件下，它不會自動填充，相當於二者之間沒有建立關系。

四、$attrs、$listeners的使用。

$attrs:包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。

這個非常有意思，它說不包含prop被識別的屬性，但是你依然可以使用props屬性去接收，只不過，你接收一個，$attrs里面就少一個，可能繼續往子組件里面越傳越少，好像層層節流一樣，上面本來發下來好多錢，每一層通過props扣一部分，真正到下面的就剩一個空殼子了。。。

$listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。有了$attrs的層層節流特性以后，我以為$listeners也會一樣，父組件處理之后，$listeners中就會去掉該事件呢，但是試驗結果是，父組件即使處理了，它仍然會繼續向爺爺組件傳遞，然后爺爺組件也可以正常響應並處理事件，好像一個pipe一樣，層層處理。

五、插槽的新舊版對比。

 舊版插槽的使用<template slot="slotname" slot-scope="scope">{{scope.XXX}}</template>，而新版使用<template v-slot:slotname="scope">{{scope.XXX}}</template>，默認插槽取scope的值可以省略slotname，即可以如此：<template v-slot="scope">{{scope.XXX}}</template>

新版的更是有簡寫，可以直接使用#代替v-slot:，也就是說可以使用<template #slotname="scope">{{scope.XXXX}}</template>，更有甚者，可以使用解構，也就是說可以這樣：<template #slotname="{XXX}">{{XXXX}}</template>，簡潔的恐怖，令人發指。。。