高层级的变化
- 模板解析器不再依赖于DOM(除非你使用真正的DOM作为模板),因此只要你使用字符串模板,你将不再受到任何1.0版本中的解析限制。但是,如果你依赖在存在的内容中挂载一个元素作为模板(使用el元素),你将依然受到这些限制。
- 编译器(将字符串模板转换为渲染方法的部分)和运行时间现在能够被分开。这里有两种不同的构建:
- 独立构建:包括编译并且运行。这种方式和vue 1.0几乎完全一样。
- 运行时编译:由于它不包括编译器,在编译步骤时要么预编译模板,要么手动编写渲染功能。npm包默认导出这个版本,那么你需要有一个编译的过程(使用Browserify或Webpack ),从中vueify或vue-loader将可以进行模板预编译。
全局配置
- Vue.config.silent
- Vue.config.optionMergeStrategies
- Vue.config.devtools
- Vue.config.errorHandler(新API,全局的挂钩用于在组件渲染和监控的时候处理未捕获的错误)
- Vue.config.keyCodes(新API,为v-on配置自定义的key的别名)
- Vue.config.debug(已丢弃)
- Vue.config.async(已丢弃)
- Vue.config.delimiters(已丢弃)
- Vue.config.unsafeDelimiters(已丢弃,使用v-html)
全局API
- Vue.extend
- Vue.nextTick
- Vue.set
- Vue.delete
- Vue.directive
- Vue.component
- Vue.use
- Vue.mixin
- Vue.compile(新API,只能用于独立版本构建)
- Vue.transition
- stagger(已丢弃,在el上设置
- Vue.filter
- Vue.elementDirective(已丢弃,使用组件)
- Vue.partial (已丢弃,使用功能组件)
选项
data
- data
- props
。prop
。default
。coerce(已丢弃,如果你需要转换prop,请使用compute属性)
。prop binding modes(已丢弃,v-model在组件上可以工作
- propsData(新API)只能用于实例
- computed
- methods
- watch
DOM
- el
- template
- render(新API)
- replace(已丢弃,组件现在必须有一个根元素)
生命周期钩子
- init(已丢弃,请使用beforeCreate)
- created
- beforeDestroy
- destroyed
- beforeMount(新API)
- mounted(新API)
- beforeUpdate(新API)
- updated(新API)
- activated(新API,用于keep-alive)
- deactivated(新API用于keep-alive)
- ready(已丢弃,使用mounted)
- activate(已丢弃,迁移到vue-router)
- beforeCompile(已丢弃,使用created)
- compiled(已丢弃,使用mounted)
- attached(已丢弃)
- detached(已丢弃,同上)
Assets
- directives
- components
- transitions
- filters
- partials(已丢弃)
- elementDirectives(已丢弃)
杂项
- parent
- mixins
- name
- extends
- delimiters(新API,替代原版的全局配置选项,只在独立构建中可用)
- functional(新API)
- events(已丢弃)
实例方法
data
- vm.$watch
- vm.$get(已丢弃,直接检索值)
- vm.$set(已丢弃,使用Vue.set)
- vm.$delete(已丢弃,使用Vue.delete)
- vm.$eval(已丢弃,没有真正的使用)
- vm.$interpolate(已丢弃,同上)
- vm.$log(已丢弃,使用devtools)
events
- vm.$on
- vm.$once
- vm.$off
- vm.$emit
- vm.$dispatch(已丢弃,使用全局的事件或使用vuex,见下面)
- vm.$broadcast(已丢弃,同上)
DOM
- vm.$nextTick
- vm.$appendTo(已丢弃,在 vm.$el上使用本地API)
- vm.$before(已丢弃)
- vm.$after(已丢弃)
- vm.$remove(已丢弃)
生命周期
- vm.$mount
- vm.$destroy
指令
- v-text
- v-html(注意{{{ }}} 被丢弃)
- v-if
- v-show
- v-else
- v-for
。key (替代 track-by)
。object v-for
。range v-for
。参数顺序更新:数组中使用(value, index) in arr,对象中使用(value, key, index) in obj
。$index和$key被丢弃
- v-on
。modifiers
。on child component
。自定义键码,目前版本Vue.config.keyCodes代替原来的Vue.directive('on').keyCodes
- v-bind
。作为prop
。xlink
。绑定对象
- v-bind:style
- prefix sniffing
- v-bind:class
- v-model
- lazy (as modifier)
- number (as modifier)
- ignoring composition events
- debounce(已丢弃,使用v-on:input)
- v-cloak
- v-pre
- v-once(新API)
- v-ref(已丢弃,现在只是一个特殊的属性ref)
- v-el(和ref合并)
特殊组件
- <component>
- :is
- async组件
- inline-template
- <transition>
- <transition-group>
- <keep-alive>
- <slot>
- partial(已丢弃)
特殊属性
- key
- ref
- slot
服务器端渲染
- renderToString
- renderToStream
- client-side hydration
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配置上添加指令状态。
- <div v-example:arg.modifier="a.b"></div>
- // example directiveexport default {
- bind (el, binding, vnode) {
- // the binding object exposes value, oldValue, expression, arg and modifiers.
- binding.expression // "a.b"
- binding.arg // "arg"
- binding.modifiers // { modifier: true }
- // the context Vue instance can be accessed as vnode.context.
- },
- // update has a few changes, see below
- update (el, binding, vnode, oldVnode) { ... },
- // componentUpdated is a new hook that is called AFTER the entire component
- // has completed the current update cycle. This means all the DOM would
- // be in updated state when this hook is called. Also, this hook is always
- // called regardless of whether this directive's value has changed or not.
- componentUpdated (el, binding, vnode, oldVNode) { ... },
- unbind (el, binding, vnode) { ... }
- }
如果你只关心值可以使用解构:
- export default {
- bind (el, { value }) {
- // ...
- }
- }
除此之外,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函数调用,而不是采取空格分割的参数。
- {{ 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元素,也不会在组件层次结构中展示。它仅仅用于过渡行为里面的包裹内容。
最简单的用法示例:
- <transition>
- <div v-if="ok">toggled content</div></transition>
该组件定义了一些属性和事件,直接映射到旧版的过渡定义选项。
属性
- name: String
- 用于自动生成过渡CSS类名。例如,name: 'fade'将会自动生成 .fade-enter、.fade-enter-active等等。默认是v。
- appear: Boolean
- 是否在最初的渲染应用的过渡。(默认值false)
- css: Boolean
- 是否应用css过度类,默认值true。如果设置为false,只能通过触发组件事件注册的JavaScript钩子。
- type: String
- 指定等待确定过渡结束时转变的事件类型。可用的值是transition和animation。默认情况下,它会自动检测一个持续时间较长的类型。
- mode: String
- 控制离开/进入转换的时序。可用的模式是in-out和out-in,默认为同步。
- enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String
- 单独配置的过渡css类
过渡到动态组件的示例:
- <transition name="fade" mode="out-in" appear>
- <component :is="view"></component></transition>
事件
对应的在1.x API中可用的js钩子:
- before-enter
- enter
- after-enter
- before-leave
- leave
- after-leave
- before-appear
- appear
- after-appear
例子:
- <transition @after-enter="transitionComplete">
- <div v-show="ok">toggled content</div></transition>
当进入的过渡效果完成时,组件的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。
例子:
- <transition-group tag="ul" name="slide">
- <li v-for="item in items" :key="item.id">
- {{ item.text }}
- </li></transition-group>
创建可重用的转换
现在transitions能够通过组件应用,它们补在被视为一种单独类型,因此全局的Vue.transition()方法和transition配置都被丢弃。你可以通过组件的属性和方法配置内嵌的过渡。但是,我们现在怎么创建可重复使用的过渡效果,尤其是那些自定义的js钩子?答案是创建自己的过渡组件(它们特别适合作为功能组件):
- Vue.component('fade', {
- functional: true,
- render (createElement, { children }) {
- const data = {
- props: {
- name: 'fade'
- },
- on: {
- beforeEnter () { /* ... */ }, // <-- Note hooks use camelCase in JavaScript (same as 1.x)
- afterEnter () { /* ... */ }
- }
- }
- return createElement('transition', data, children)
- }
- })
你可以这么使用:
- <fade>
- <div v-if="ok">toggled content</div></fade>
- v-model的变化
- lazy和number参数现在是修饰符。
- <input v-model.lazy="text">
- 新的修饰符:.trim-修整输入,顾名思义
- debounce参数被丢弃
- v-model不再关心初始值。它始终将data的数据作为资源。这意味着数据将是以1呈现而不是2.
- data: {val: 1
- }
- <input v-model="val" value="2">
- 当使用v-for时,v-model不再生效。
- <input v-for="str in strings" v-model="str">
Refs
- v-ref现在不再是一个指令,而是一个类似于key的属性
- <!-- before --><comp v-ref:foo></comp>
- <!-- after --><comp ref="foo"></comp>
- 依然支持动态绑定:
- <comp :ref="dynamicRef"></comp>
- vm.$els和vm.$refs合并了。在正常元素上使用是DOM元素,在组件上使用是组件实例。
杂项
- track-by已经被key替代。对于绑定属性它遵守相同的规则,没有v-bind:或者:字头,它被视为普通字符串。大多数情况下需要动态绑定,如下:
- <!-- 1.x --><div v-for="item in items" track-by="id">
- <!-- 2.0 --><div v-for="item in items" :key="item.id">
- 内插值属性已被弃用。
- <!-- 1.x --><div id="{{ id }}">
- <!-- 2.0 --><div :id="id">
- 属性绑定行为变化:当绑定属性时,只有null、undefine和false被认为是false。这意味着0和空字符串依旧呈现出原来的样子。对于枚举属性,:draggable="''"将被渲染为draggable="true"。
- 另外,对于枚举属性,除了上述false的值,false字符串也会被渲染为attr="false"。
- 当使用一个自定义组件,v-on只听自定义事件$emitted挂载在组件上。(不再监听DOM事件)
- v-else不再适用于v-show,请使用其他的否定表达式。
- 单次绑定({{* foo }})被移除,请使用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实例达到目的:
- var bus = new Vue()
- // in component A's method
- bus.$emit('id-selected', 1)
- // in component B's created hook
- bus.$on('id-selected', this.someMethod)
并且不要忘记使用$off解绑事件:
- // in component B's destroyed hook
- bus.$off('id-selected', this.someMethod)
这种模式在简单的场景中可以作为$dispatch和$broadcast的替代。但是在复杂的场景中,建议使用vuex建立一个专门的状态管理层。
如何处理数组中filter的弃用?
对于使用v-for进行列表过滤-过滤器常见用法之一-现在建议使用computed属性返回原始数组的一个副本(查阅更新数据例子)。好处在于你不再受到filter语法的限制,现在它只是普通的javascript,并且你可以正常访问过滤结果,因为它只是一个计算的属性。
如何处理在v-model中debounce的丢弃?
- debounce用于我们多久执行异步请求和其他操作,在v-model中使用十分容易,但这样也延迟了状态更新带来了限制。