Vue 2.3、2.4 知识点小结
原文连接 blog ， 本文不涉及 SSR.
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 。
完。