Vue2.0的变化(译)

高层级的变化

• 模板解析器不再依赖于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

 

• 丢弃$index和$key

• 新数组语法

• value in arr

• (value, index) in arr

• 新对象语法

• value in obj

• (value, key) in obj

• (value, key, index) in obj

指令接口的改变

大体来说，2.0版本中指令大范围的降低功能，它们仅用于低层次的直接dom操作。在多数情况下，你更应该使用组件作为主要的代码重构抽象。

指令不再有实例，这意味着指令中将不存在update和unbind目前将接受任何数据作为参数。

请注意，绑定对象是不可变的。设置

• <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 }) {

•     // ...

•   }

• }

除此之外，

• 在bind之后将不再自动调用

• 当组件重新渲染时总能响应，无论被绑定的值是否发生改变。你可以通过
  • elementDirective, 指令参数和指令配置，例如acceptStatement, deep等等

均被删除。

过滤器用法和语法变化

在vue 2.0，filter有了一系列的变化：

• filter现在只能用于文本插入（
  • vue 2.0不提供任何内置过滤器。建议使用独立的方法解决特定域的问题，例如moment.js用于格式化时间，accounting.js用于格式化金融货币。也欢迎你来创建自己的过滤器，并与社区分享吧！

• filter语法更改为内嵌的js函数调用，而不是采取空格分割的参数。

• {{ date | formatDate('YY-MM-DD') }}

过渡组件过渡CSS的变化

• • v-enter-active：在元素插入前应用，当transition/animation结束时移除。

• • v-leave-active：当离开的transition触发时正确应用，当transition/animation结束时移除。

• 过渡API的变化

• 组件

所有单元素的过度效果通过使用这个内置组件包装目标元素或组件得到相应的效果。这是一个抽象组件，意味着它不会渲染额外的DOM元素，也不会在组件层次结构中展示。它仅仅用于过渡行为里面的包裹内容。

最简单的用法示例:

• <transition>

•   <div v-if="ok">toggled content</div></transition>

该组件定义了一些属性和事件，直接映射到旧版的过渡定义选项。

属性

• name: String

• 用于自动生成过渡CSS类名。例如，.fade-enter、.fade-enter-active等等。默认是v。

• appear: Boolean

• 是否在最初的渲染应用的过渡。（默认值
  • css: Boolean

• 是否应用css过度类，默认值
  • type: String

• 指定等待确定过渡结束时转变的事件类型。可用的值是
  • mode: String

• 控制离开/进入转换的时序。可用的模式是
  • 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>

当进入的过渡效果完成时，组件的一些注意事项：

• • 和1.0类似，对于enter和leave钩子，在cb作为第二个参数的存在下表示使用者想要过渡结束时间的明确控制。

• 组件

所有的多元素过渡效果通过使用内置组件包装元素应用。它暴露了和<transition>一样的属性和事件。不同之处在于：

• 不同于,<transition-group>渲染一个真实的DOM元素。默认是渲染一个<span>标签，并且你可以配置哪些元素应该通过标记的属性呈现。你也可以使用is特性，例如<ul is="transition-group">。

• 不支持mode属性。

• 下的子组件必须有唯一的key。

例子：

• <transition-group tag="ul" name="slide">

•   <li v-for="item in items" :key="item.id">

•     {{ item.text }}

•   </li></transition-group>

创建可重用的转换

现在

• 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>

• • lazy和number参数现在是修饰符。

• <input v-model.lazy="text">

• 新的修饰符：
  • debounce参数被丢弃

• • data: {val: 1

• }

• <input v-model="val" value="2">

• 当使用
  • <input v-for="str in strings" v-model="str">

Refs

• • <!-- before --><comp v-ref:foo></comp>

• <!-- after --><comp ref="foo"></comp>

• 依然支持动态绑定：

• <comp :ref="dynamicRef"></comp>

• 杂项

• • <!-- 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">

• 属性绑定行为变化：当绑定属性时，只有
  • 另外，对于枚举属性，除了上述false的值，false字符串也会被渲染为attr="false"。

• 当使用一个自定义组件，
  • v-else不再适用于v-show，请使用其他的否定表达式。

• 单次绑定（
  • Array.prototype.$set/$remove被丢弃（使用Vue.set或者Array.prototype.splice）。

• • root实例不能使用props（请使用propsData）

• 在
  • 在vue的实例中不能使用Vue.set和Vue.delete

升级小提示如何处理丢弃的我们弃用$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)

并且不要忘记使用

• // in component B's destroyed hook

• bus.$off('id-selected', this.someMethod)

这种模式在简单的场景中可以作为如何处理数组中filter的弃用？

对于使用更新数据例子）。好处在于你不再受到filter语法的限制，现在它只是普通的javascript，并且你可以正常访问过滤结果，因为它只是一个计算的属性。

如何处理在

• debounce用于我们多久执行异步请求和其他操作，在v-model中使用十分容易，但这样也延迟了状态更新带来了限制。

当在设计一个搜索功能时这个限制变得很明显，看看这个例子，使用debounce属性，在搜索之前没法检测脏数据，因为我们不能访问输入的实时状态。