Vue 2.三、2.4 知識點小結

時間 2019-12-07

標籤 vue 2.4 知識小結简体版

原文原文鏈接

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

2.3 參考 https://github.com/vuejs/vue/...
2.4 參考 https://github.com/vuejs/vue/...
實例 demo 地址：https://github.com/jkchao/vue...html

2.3

style 多重值；vue
```
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
```
這會渲染數組中最後一個被瀏覽器支持的值。java
新增.passive 修飾符 (demo1) ； .passive 修飾符表示事件永遠不會調用 preventDefault() ，主要爲解決滾動和觸摸事件的卡頓而出現，關於 passive 更多信息請移步 MDN 。git
從新引入 .sync 修飾符 (demo2)；提供對於 prop 的雙向綁定。github
```
<child :bar.sync="foo"></child>
```
實際上是個語法糖web
```
<child :bar="foo" @update:bar="e => foo = e">
```
此時須要在子組件中顯示觸發事件：vue-router
```
this.$emit('update:bar', newValue)
```
Async Component Improvements (demo3);vuex

在 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，更多內容，請參考 https://cn.vuejs.org/v2/guide...函數化組件。

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>