原文连接 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 。
完。