v-for
迭代语法变化
- 丢弃
和$index
$key
- 新数组语法
- value in arr
- (value, index) in arr
- 新对象语法
- value in obj
- (value, key) in obj
- (value, key, index) in obj
指令接口的改变
大体来说,2.0 版本中指令大范围的降低功能,它们仅用于低层次的直接 dom 操作。在多数情况下,你更应该使用组件作为主要的代码重构抽象。
指令不再有实例,这意味着指令中将不存在this
,并且bind
, update
和unbind
目前将接受任何数据作为参数。
请注意,绑定对象是不可变的。设置binding.value
没有任何效果。并且在它上面添加属性不会持久,如果你真的非常需要可以在el
配置上添加指令状态。
1 | <div v-example:arg.modifier="a.b"></div> |
1 | // example directive |
如果你只关心值可以使用解构:
1 | export default { |
除此之外,update
钩子有一些变化:
- 在
bind
之后将不再自动调用 - 当组件重新渲染时总能响应,无论被绑定的值是否发生改变。你可以通过
binding.value === binding.oldValue
比较跳过不必要的更新,但也会有情况下,你希望应用始终更新。例如,当指令绑定到对象那可能希望是变化而不是替代。
elementDirective
, 指令参数和指令配置,例如acceptStatement
, deep
等等
均被删除。
过滤器用法和语法变化
在 vue 2.0,filter 有了一系列的变化:
- filter 现在只能用于文本插入(双花括号标签)。在之前我们在指令中使用 filter,例如
v-model
,v-on
等等,导致使用的复杂性,并且在v-for
上的列表过滤,它更适合迁移到计算性能的 js 中。 - vue 2.0 不提供任何内置过滤器。建议使用独立的方法解决特定域的问题,例如moment.js用于格式化时间,accounting.js用于格式化金融货币。也欢迎你来创建自己的过滤器,并与社区分享吧!
filter 语法更改为内嵌的 js 函数调用,而不是采取空格分割的参数。
1
2
3
4
5{
{
date | formatDate('YY-MM-DD')
}
}
过渡组件
过渡 CSS 的变化
v-enter
:在元素插入前应用,1 秒后删除。(开始于进入状态)v-enter-active
:在元素插入前应用,当transition
/animation
结束时移除。v-leave
:当离开的transition
触发时正确应用,一秒后删除。(开始于离开状态)v-leave-active
:当离开的transition
触发时正确应用,当transition
/animation
结束时移除。
v-enter-active
和v-leave-active
帮助你指定不同的曲线用于进入/离开动画。在多数情况下,升级只需将当前的v-leave
替换为v-leave-active
。(对于 css 动画,使用v-enter-active
和v-leave-active
)
过渡 API 的变化
<transition>
组件
所有单元素的过度效果通过使用<transition>
这个内置组件包装目标元素或组件得到相应的效果。这是一个抽象组件,意味着它不会渲染额外的 DOM 元素,也不会在组件层次结构中展示。它仅仅用于过渡行为里面的包裹内容。
最简单的用法示例:
1 | <transition> <div v-if="ok">toggled content</div> </transition> |
该组件定义了一些属性和事件,直接映射到旧版的过渡定义选项。
属性
- name: String
- 用于自动生成过渡 CSS 类名。例如,
name: 'fade'
将会自动生成.fade-enter
、.fade-enter-active
等等。默认是v
。
- 用于自动生成过渡 CSS 类名。例如,
- appear: Boolean
- 是否在最初的渲染应用的过渡。(默认值
false
)
- 是否在最初的渲染应用的过渡。(默认值
- css: Boolean
- 是否应用 css 过度类,默认值
true
。如果设置为false
,只能通过触发组件事件注册的 JavaScript 钩子。
- 是否应用 css 过度类,默认值
- type: String
- 指定等待确定过渡结束时转变的事件类型。可用的值是
transition
和animation
。默认情况下,它会自动检测一个持续时间较长的类型。
- 指定等待确定过渡结束时转变的事件类型。可用的值是
- mode: String
- 控制离开/进入转换的时序。可用的模式是
in-out
和out-in
,默认为同步。
- 控制离开/进入转换的时序。可用的模式是
- enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String
- 单独配置的过渡 css 类
过渡到动态组件的示例:
1 | <transition name="fade" mode="out-in" appear> |
事件
对应的在 1.x API 中可用的 js 钩子:
- before-enter
- enter
- after-enter
- before-leave
- leave
- after-leave
- before-appear
- appear
- after-appear
例子:
1 | <transition @after-enter="transitionComplete"> |
当进入的过渡效果完成时,组件的transitionComplete
方法将会在过渡 DOM 元素作为参数被调用。
一些注意事项:
leave-cancelled
在插入删除中不可用。一旦离开的过渡效果开始,将不能被取消。但是仍然可用于v-show
。- 和 1.0 类似,对于
enter
和leave
钩子,在cb
作为第二个参数的存在下表示使用者想要过渡结束时间的明确控制。
<transition-group>
组件
所有的多元素过渡效果通过使用<transition-group>
内置组件包装元素应用。它暴露了和<transition>
一样的属性和事件。不同之处在于:
- 不同于
<transition>
,<transition-group>
渲染一个真实的 DOM 元素。默认是渲染一个<span>
标签,并且你可以配置哪些元素应该通过标记的属性呈现。你也可以使用is
特性,例如<ul is="transition-group">
。 <transition-group>
不支持mode
属性。<transition-group>
下的子组件必须有唯一的 key。
例子:
1 | <transition-group tag="ul" name="slide"> |
创建可重用的转换
现在transitions
能够通过组件应用,它们补在被视为一种单独类型,因此全局的Vue.transition()
方法和transition
配置都被丢弃。你可以通过组件的属性和方法配置内嵌的过渡。但是,我们现在怎么创建可重复使用的过渡效果,尤其是那些自定义的 js 钩子?答案是创建自己的过渡组件(它们特别适合作为功能组件):
1 | Vue.component('fade', { |
你可以这么使用:
1 | <fade> <div v-if="ok">toggled content</div> </fade> |
v-model
的变化
lazy
和number
参数现在是修饰符。1
<input v-model.lazy="text" />
新的修饰符:
.trim
-修整输入,顾名思义debounce
参数被丢弃v-model
不再关心初始值。它始终将 data 的数据作为资源。这意味着数据将是以 1 呈现而不是 2.1
2
3
4
5
6
data: {
val: 1
}
`1
<input v-model="val" value="2">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 当使用`v-for`时,`v-model`不再生效。
```html
<input v-for="str in strings" v-model="str" />
```
### Refs
- `v-ref`现在不再是一个指令,而是一个类似于`key`的属性
```html
<!-- before -->
<comp v-ref:foo></comp>
<!-- after -->
<comp ref="foo"></comp>
依然支持动态绑定:
1
2
3
<comp :ref="dynamicRef"></comp>
`
vm.$els
和vm.$refs
合并了。在正常元素上使用是 DOM 元素,在组件上使用是组件实例。
杂项
track-by
已经被key
替代。对于绑定属性它遵守相同的规则,没有v-bind:
或者:
字头,它被视为普通字符串。大多数情况下需要动态绑定,如下:1
2<!-- 1.x -->
<div v-for="item in items" track-by="id"></div>
1 | - 内插值属性已被弃用。 |
- 属性绑定行为变化:当绑定属性时,只有
null
、undefine
和false
被认为是false
。这意味着 0 和空字符串依旧呈现出原来的样子。对于枚举属性,:draggable="''"
将被渲染为draggable="true"
。
另外,对于枚举属性,除了上述false
的值,false
字符串也会被渲染为attr="false"
。 - 当使用一个自定义组件,
v-on
只听自定义事件$emitted
挂载在组件上。(不再监听 DOM 事件) v-else
不再适用于v-show
,请使用其他的否定表达式。- 单次绑定只能使用
v-once
。 Array.prototype.$set
/$remove
被丢弃(使用Vue.set
或者Array.prototype.splice
)。:style
不再支持!import
。root
实例不能使用props
(请使用propsData
)- 在
Vue.extend
中el
配置项不能被使用,它现在只能被用作一个实例创建选项。 - 在 vue 的实例中不能使用
Vue.set
和Vue.delete
升级小提示
如何处理丢弃的$dispatch
和$broadcast
?
我们弃用$dispatch
和$broadcast
的原因在于依赖组件树结构的事件流,当组件树变得很大时很难推理(简单地说:它不能在大型应用很好地扩展,我们不希望以后给你设置痛点)。$dispatch
和$broadcast
不能解决同级组件之间的通信。从而,你可以使用和 node 中的EventEmitter
类似的模式:一个允许组件通信的集中事件枢纽,无论他们在组件树的任何地方。因为 vue 的实例实现了事件发射接口,你可以使用空的 vue 实例达到目的:
1 | var bus = new Vue() |
1 | // in component A's method |
1 | // in component B's created hook |
并且不要忘记使用$off
解绑事件:
1 | // in component B's destroyed hook |
这种模式在简单的场景中可以作为$dispatch
和$broadcast
的替代。但是在复杂的场景中,建议使用vuex
建立一个专门的状态管理层。
如何处理数组中 filter 的弃用?
对于使用v-for
进行列表过滤-过滤器常见用法之一-现在建议使用computed
属性返回原始数组的一个副本(查阅更新数据例子)。好处在于你不再受到filter
语法的限制,现在它只是普通的 javascript,并且你可以正常访问过滤结果,因为它只是一个计算的属性。
如何处理在v-model
中debounce
的丢弃?
debounce
用于我们多久执行异步请求和其他操作,在v-model
中使用十分容易,但这样也延迟了状态更新带来了限制。
当在设计一个搜索功能时这个限制变得很明显,看看这个例子,使用debounce
属性,在搜索之前没法检测脏数据,因为我们不能访问输入的实时状态。
未完待续….
翻译自2.0 Changes