Vue 2.三、2.4 知識點小結

原文鏈接 blog ， 本文不涉及 SSR.

2.3 參考 github.com/vuejs/vue/r…
2.4 參考 github.com/vuejs/vue/r…
實例 demo 地址：github.com/jkchao/vue-…

---

2.3

• style 多重值；

  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>複製代碼

  這會渲染數組中最後一個被瀏覽器支持的值。

• 新增.passive 修飾符 (demo1) ； .passive 修飾符表示事件永遠不會調用 preventDefault() ，主要爲解決滾動和觸摸事件的卡頓而出現，關於 passive 更多信息請移步 MDN 。

• 從新引入 .sync 修飾符 (demo2)；提供對於 prop 的雙向綁定。

  <child :bar.sync="foo"></child>複製代碼

  實際上是個語法糖

  <child :bar="foo" @update:bar="e => foo = e">複製代碼

  此時須要在子組件中顯示觸發事件：

  this.$emit('update:bar', newValue)複製代碼

• Async Component Improvements (demo3);

  在 2.3 以前，可使用異步組件：

  // some.vue
    export default {
      // ...
      components: {
        'asyncCom': () => import('./asyncCøm')
      }
    }複製代碼

  2.3 新增高級異步組件

  官網上比較清楚：

  爲了便於演示，使用延遲加載異步組件：

  import loadingCom from '../components/loadingCom.vue'
    import errCom from '../components/errCom.vue'
    const asyncCom = () => ({
      component: new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(import('../components/asyncCom.vue'))
        }, 2000)
      }),
      loading: loadingCom,
      error: errCom,
      delay: 200,
      timeout: 3000
    })
  
    export default {
      // ...
      components: { asyncCom }
    }複製代碼

  效果以下圖：

  或者，你也能夠點擊後加載 (demo4)：

  固然，也能夠用於 vue-router ( 2.40+ ) demo5。

• Functional Component Improvements；

  在2.3 + 版本，函數式組件能夠省略 props 選項，全部組件上的屬性會被自動解析 成props，更多內容，請參考 cn.vuejs.org/v2/guide/re… 。

2.4

• v-on 支持綁定一個事件／監聽器鍵值對的對象，此時不支持任何修飾器；

<button v-on="{ mousedown: some, mouseup: other }"></button>複製代碼

• 新增 comments 選項，當設爲 true 時，將會保留且渲染模板中的 HTML 註釋；
  該選項暫時沒法在構建工具中使用 issues。

• 新增 interitAttrs 選項；

  在版本 2.4 以前，默認狀況下父做用域的不被做爲props特性綁定的屬性，將會做爲普通的 HTML 屬性，應用在跟元素上。

  舉個例子：

  // parent.vue
    <template>
      <child-commpent :foo="f" :boo="b"></child-comment> </template>
  
    <script>
    const childComment = () => import('./childCom.vue')
    export default {
      data () {
        return {
          f: 'Hello world!'
          b: 'Hello Vue!'
        }  
      }
    }
    </script>複製代碼

  // childComment.vue
    <template>
      <div>{{ foo }}<div> </template> <script> export default { props: ['foo'] } </script>複製代碼

  最後會被渲染爲：

  <div boo="Hello Vue!">Hello world!</div>複製代碼

  設置 interitAttrs 爲 false，以後，不會應用到跟元素上。

  // childCom.vue
    <template>
      <div>{{ foo }}</div>
    </template>
  
    <script>
    export default {
      props: ['foo'],
      inheritAttrs: false
    }
    </script>複製代碼

  渲染：

  <div>Hello world!</div>複製代碼

• 新增 $attrs, $listeners 選項；

  多級組件嵌套須要傳遞數據時，一般使用的方法是經過 vuex 。若是僅僅是傳遞數據，而不作中間處理，使用 vuex 處理，未免有點殺雞用牛刀，Vue 2.4 版本提供了另外一種方法，使用 v-bind="$attrs", 將父組件中不被認爲 props特性綁定的屬性傳入子組件中，一般配合 interitAttrs 選項一塊兒使用，具體請看 demo 。

  // demo.vue
    <template>
      <div> <child-com :foo="foo" :boo="boo" :coo="coo" :doo="doo"></child-com> </div> </tempalte>
    <script>
    const childCom = () => import('./childCom1.vue')
    export default {
      data () {
        return {
          foo: 'Hello World!',
          boo: 'Hello Javascript!',
          coo: 'Hello Vue',
          doo: 'Last'
        }
      },
      components: { childCom }
    }
    </script>複製代碼

  // childCom1.vue
    <template>
      <div> <p>foo: {{ foo }}</p> <p>attrs: {{ $attrs }}</p> <child-com2 v-bind="$attrs"></child-com2> </div> </template>
    <script>
    const childCom2 = () => import('./childCom2.vue')
    export default {
      props: ['foo'],
      inheritAttrs: false,
      created () {
        console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }
      }
    }
    </script>複製代碼

  // childCom2.vue
    <template>
      <div> <p>boo: {{ boo }}</p> <p>attrs: {{ $attrs }}</p> <child-com3 v-bind="$attrs"></child-com3> </div> </template>
  
    <script>
    const childCom3 = () => import('./childCom3.vue')
    export default {
      props: ['boo']
      inheritAttrs: false,
      created () {
        console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' }
      }
    }
    </script>複製代碼

  // childCom3.vue
    // ...複製代碼

  最後被渲染爲

  具體請看 demo6 。

  $listeners 的用法和 $attrs 相似，demo6 。

---

完。