2.3

• style?多重值；

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

  這會渲染數(shù)組中最后一個被瀏覽器支持的值。

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

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

  <child :bar.sync="foo"></child>

  其實是個語法糖

  <child :bar="foo" @update:bar="e => foo = e">

  此時需要在子組件中顯示觸發(fā)事件：

  this.$emit('update:bar', newValue)

• Async Component Improvements (demo3);

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

  // some.vueexport default {// ...components: {'asyncCom': () => import('./asyncC?m') } }

  2.3 新增高級異步組件

  官網(wǎng)上比較清楚：

  ?

  ?

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

  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 + 版本，函數(shù)式組件可以省略?props?選項，所有組件上的屬性會被自動解析 成props，更多內(nèi)容，請參考?https://cn.vuejs.org/v2/guide/render-function.html#函數(shù)化組件?。

2.4

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

<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?選項；

  多級組件嵌套需要傳遞數(shù)據(jù)時，通常使用的方法是通過?vuex?。如果僅僅是傳遞數(shù)據(jù)，而不做中間處理，使用?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?。

總結

以上是生活随笔為你收集整理的Vue 2.3、2.4 知识点小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。