从 vue 1.x 升级到 vue 2.x 常见问题

vue 刚开始只是一个库，提供语法糖，它带来了数据与视图的双向绑定，简化了前端开发人员频繁操作 DOM 的繁琐，随着 vue 生态圈的发展，包括 vue-cli、vue-router、vuex 的产生，以及其他一些开发者开发的以 vue 为核心的组件库，UI库，服务端渲染等等的诞生，vue 已经是现在最流行的前端框架之一了。

vue 2.x 相较于 vue 1.x 核心不变，但还是有着很多的地方的改动，包括很多 API 的废除，以及提供很多新的 API 。包括性能提升等等…。具体可以看尤老师写的文章 Vue 2.0 发布了！，里面详细的介绍 vue 2.x 带了哪些令人激动的新功能。

当然了，从 vue 1.x 升级到 vue 2.x 的所有的变动在官方文档中都能查到。

那么，本文将提出几点常见的，以及我在从 vue 1.x 升级到 vue 2.x 的过程中遇到的问题和以及解决方案。

透过这篇文章，希望能帮助大家解决实际工作中最常用的从 vue 1.x 升级到 vue 2.x 需要注意的地方和 API 的改动。

transition

在 vue 1.x 中：
使用过度效果，需要在目标元素上使用 transiton 特性：

<div v-if="show" transition="my-transition"></div>

类名的添加和切换取决于 transition 特性的值，比如说你的 transition="fade" ，那么，就会有三个 CSS 类名：
1、.fade-transition 始终保留在元素上。（这一点和 vue 2.x 有明显的差别）
2、.fade-enter 定义进入过渡的开始状态。只应用一帧后立即删除。
3、.fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

例如：

<div if="show" transition="expand">hello</div>/* 必需*/.expand-transition {  transition: all .3s ease;  height: 30px;  padding: 10px;  background-color: #eee;  overflow: hidden;}/* .expand-enter 定义进入的开始状态 *//* .expand-leave 定义离开的结束状态 */.expand-enter, .expand-leave {  height: 0;  padding: 0 10px;  opacity: 0;}// 这里我们定义了动画开始的状态，以及过渡的状态，动画最终的状态就是这个元素自己本身的样式

在 vue 2.x 中：
transition 的用法还是有很大区别的。
首先，它不像 vue 1.x 那样写在目标元素上，而是 Vue 提供了 transition 的封装组件。

<transition name="fade" mode="out-in" appear>  <div v-if="ok">toggled content</div></transition>

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。

相较于 vue 1.x 中的 3 个 css 过渡类名（v-transition、v-enter、v-leave），vue 2.x 中有 6 个 class 切换。
1、v-enter
2、v-enter-active ： 定义过渡状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。（这个类似 vue 1.x 中的 v-transition ，但是不同 vue 1.x 中的是，它会在动画完成之后移除）
3、v-enter-to ：2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除 ），在 transition/animation 完成之后移除。
4、v-leave ： 类似 v-enter
5、v-leave-active ： 类似 v-enter-active
6、v-leave-to ： 类似 v-enter-to

渐进过渡

在 vue 1.x 中：
transition 与 v-for 一起用时可以创建渐进过渡。给过渡元素添加一个特性 stagger、enter-stagger 或 leave-stagger；

<div v-for="item in list" transition="stagger" stagger="100"></div>

详情看官方文档：vue 1.x 渐进过渡

在 vue 2.x 中：
就移除了 stagger ，如果希望在列表渲染中使用渐进过渡，可以通过设置元素的 data-index（或类似属性）来控制时间。

与此同时，vue 2.x 中添加了 <transition-group> 组件用来渲染整个列表，与 <transition> 区分开。

还添加了一个新特性 v-move 用来处理列表的排序过渡效果。这都是与 vue 1.x 不相同的地方

v-el 和 v-ref 合并为一个 ref 属性

在 vue 1.x 中：
v-el 用来为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。

<span v-el:msg>hello</span>this.$els.msg.textContent  // -> 'hello'

v-ref 用来在父组件上注册一个子组件的索引，便于直接访问。不需要表达式。必须提供参数 id。可以通过父组件的 $refs 对象访问子组件。

<comp v-ref:child></comp>// 从父组件访问this.$refs.child

在 vue 2.x 中：
简单起见，v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。
详情：vue 1.x 和 vue 2.x 中获取 DOM 的区别

事件处理器

在 vue 1.x 中：
事件处理器，我们使用 events
它是一个对象，键是监听的事件，值是相应的回调。注意这些事件是 Vue 事件而不是 DOM 事件。值也可以是方法的名字。在实例化的过程中，Vue 实例会调用对象的每个键。

var vm = new Vue({  events: {    'hook:created': function() {      console.log('created')    }})

在 vue 2.x 中：
events 选项被弃用。事件处理器现在在 created 钩子中注册。

事件派发与监听

在 vue 1.x 中：
派发事件，使用 $dispatch，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止，除非它返回 true。附加参数都会传给监听器回调。
详情：vm.$dispatch

广播事件，使用 $broadcast，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。每条路径上的通知在触发一个监听器后停止，除非它返回 true 。
详情：vm.$broadcast

在 vue 2.x 中：
$dispatch 和 $broadcast 已经被弃用。对于 $dispatch 和 $broadcast 最简单的升级方式就是：通过使用事件中心（关于事件中心，你可以查看 这篇文章 的最后一段），允许组件自由交流，无论组件处于组件树的哪一层。

当然了，简单的父子组件的相互通信，vue 2.x 给出的直接方案是 v-on 和 v-emit。

当然了，使用更多简明清晰的组件间通信和更好的状态管理方案，Vuex 应该是最好的选择了。

生命周期

生命周期钩子也是 vue 2.x 中相较于 vue 1.x 中有较大的改进，异同如下表格：

Vue 1.x Vue 2.x 描述 init beforeCreate 在实例初始化之后，组件属性计算之前（methods，data，computed 等） created created 实例已经创建，但是 dom 还没生成，$el 属性目前不可见 beforeCompile beforeMount 在挂载开始之前被调用 compiled
ready mounted 在挂载开始之后被调用 - beforeUpdate 组件更新之前 - updated 组件更新之后 beforeDestroy beforeDestroy 实例销毁之前调用 destroyed destroyed 实例销毁之后调用