最近这段时间对公司vue项目进行升级版本以及重构，刚开始时觉得真的很难，不知道从何入手，但是结合官网升级介绍和网上一些前辈的引导下已经对升级版本不再害怕，以下是我对vue项目升级版本的总结，主要是项目过程中遇到的。
升级步骤：
1. 配置文件修改
2. 利用迁移工具查看需要修改的东西（可以对比官网vue版本升级左侧栏的相应选项，有些内容迁移工具可能会没有提示）
3. 运行代码查看控制台是否有报错（有些项目用的依赖包是依赖于vue 1.0版本的，导致升级后会提示依赖包的问题）
webpack配置文件修改&相应依赖包升级
配置文件的更改
- build目录文件修改
- config目录文件修改
- package.json文件修改
=> 升级方法：利用2.9的脚手架新建一个文件夹，然后把对应的目录文件覆盖到1.0的，注意对比看项目依赖的不能覆盖掉。
Router 升级
- router.start 替换
不再会有一个特殊的 API 用来初始化包含 Vue Router 的 app ，这意味着不再是：
router.start({
template: '<router-view></router-view>'
}, '#app')
你只需要传一个路由属性给 Vue 实例：
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
})
或者，如果你使用的是运行时构建 (runtime-only) 方式：
new Vue({
el: '#app',
router: router,
render: h => h('router-view')
})- router.map 替换
路由现在被定义为一个在 router 实例里的一个 routes 选项数组。所以这些路由：
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})
会以这种方式定义：
var router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
考虑到不同浏览器中遍历对象不能保证会使用相同的键值，- router.redirect 替换
现在用一个路由定义的选项作为代替。举个例子，你将会更新：
router.redirect({
'/tos': '/terms-of-service'
})
成像下面的routes配置里定义的样子：
{
path: '/tos',
redirect: '/terms-of-service'
}- router.go改变（为了与 HTML5 History API 保持一致性，router.go 已经被用来作为
后退/前进导航，router.push 用来导向特殊页面。）
vue 升级
模板
- 每一个组件必须有唯一的根元素
v-for
- 遍历对象包含
key的时候，(key,value) => (value,key) $index和$key移除了track-by替换为key
<div v-for="item in items" track-by="id"> => <div v-for="item in items" v-bind:key="item.id">- v-for 范围值 变更:
v-for="number in 10" 的 number 从 0 开始到 9 结束 => 现在从 1开始，到 10 结束。钩子函数
- ready替换: ready => mounted
- init 重新命名: init => beforeCreate
- 修改props弃用
在1.0版本中，会先声明一个prop然后在组件中修改，现在是不推荐的，因为父组件在重新渲染的时候，子组件的prop也会被覆盖。
绑定
- 使用内联 value的v-model 移除
v-model不再以内联value值作为初始值，以data中相应属性为初始值。 - 属性内部的计算插值 移除： class=”btn btn-{{ size }}” => v-bind:class=” ‘btn btn-’ + size “
- 绑定属性时 value=”{{XX}}” => v-bind:value=”XX。
- HTML 计算插值 移除： HTML 的计算插值 ({{{ foo }}}) 已经移除，取代的是 v-html 指令
- v-link 替换
<a v-link="'/about'">About</a> => <router-link to="/about">About</router-link>注意：<router-link>不支持target="_blank"属性，如果你想打开一个新标签页，你必须用<a>标签。
过渡
transition参数替换： 不再使用transition属性，而是通过<transition>和<transition-group>包裹实现过渡效果的元素。
事件
- events事件移除： 事件处理在钩子函数created中注册
$dispatch和$broadcast替换：使用事件中心或者vuex
响应
- Array.prototype.$remove 移除
用 Array.prototype.splice 替代，例如：
methods: {
removeTodo: function (todo) {
var index = this.todos.indexOf(todo)
this.todos.splice(index, 1)
}
}
或者更好的方法，直接给除去的方法一个 index 参数：
methods: {
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}过滤器
- 插入文本之外的过滤器 移除
1.替换 limitBy 过滤器
不再这样写：
<p v-for="item in items | limitBy 10">{{ item }}</p>
在 computed 属性中使用 js 内置方法：.slice method：
<p v-for="item in filteredItems">{{ item }}</p>
computed: {
filteredItems: function () {
return this.items.slice(0, 10)
}
}
2.替换 filterBy 过滤器
不再这样写：
<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>
在 computed 属性中使用 js 内置方法 .filter method：
<p v-for="user in filteredUsers">{{ user.name }}</p>
computed: {
filteredUsers: function () {
var self = this
return self.users.filter(function (user) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
3.替换 orderBy 过滤器
不这样写：
<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>
而是在 computed 属性中使用 lodash’s orderBy (或者可能是 sortBy)：
<p v-for="user in orderedUsers">{{ user.name }}</p>
computed: {
orderedUsers: function () {
return _.orderBy(this.users, 'name')
}
}- 过滤器参数符号变更
现在过滤器参数形式可以更好地与 js 函数调用方式一致，因此不用再用空格分隔参数：
<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>
现在用圆括号括起来并用逗号分隔：
<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>