原文連接 blog 匠璧， 本文不涉及 SSR.
2.3 參考 https://github.com/vuejs/vue/releases/tag/v2.3.0
2.4 參考 https://github.com/vuejs/vue/releases/tag/v2.4.0
實例 demo 地址：https://github.com/jkchao/vue-demo
2.3
-
style多重值衙解；<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>這會渲染數(shù)組中最后一個被瀏覽器支持的值喉前。
新增
.passive修飾符 (demo1) 把将； .passive 修飾符表示事件永遠(yuǎn)不會調(diào)用 preventDefault() 轻专，主要為解決滾動和觸摸事件的卡頓而出現(xiàn)，關(guā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.vue export 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)：
當(dāng)然涂屁，也可以用于
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選項，當(dāng)設(shè)為true時饿自，將會保留且渲染模板中的 HTML 注釋汰翠；
該選項暫時無法在構(gòu)建工具中使用 issues。
-
新增
interitAttrs選項昭雌；在版本 2.4 之前复唤，默認(rèn)情況下父作用域的不被作為
props特性綁定的屬性，將會作為普通的 HTML 屬性烛卧，應(yīng)用在跟元素上苟穆。舉個例子：
// 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>設(shè)置
interitAttrs為false，之后唱星，不會應(yīng)用到跟元素上雳旅。// 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", 將父組件中不被認(rèn)為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 姿鸿。
ru
完谆吴。
