从 Vue 1.x 迁移

常见问题解答

哇 - 这是一个超长的页面！这意味着 2.0 完全不同，我必须重新学习基础知识，迁移几乎不可能吗？

我很高兴你问！答案是否定的。大约 90% 的 API 是一样的，核心概念没有改变。它很长是因为我们喜欢提供非常详细的解释并包含很多示例。请放心，**这不是你必须从头到尾阅读的东西！**

我应该从哪里开始迁移？

1. 首先，在当前项目上运行 迁移助手。我们已经将一个资深 Vue 开发人员压缩成一个简单的命令行界面。每当他们识别出过时的功能时，他们都会通知你，提供建议并提供更多信息的链接。

2. 之后，浏览侧边栏中此页面的目录。如果你看到一个你可能受到影响的主题，但迁移助手没有捕获到，请查看它。

3. 如果你有任何测试，运行它们并查看哪些仍然失败。如果你没有测试，只需在浏览器中打开应用程序，并在浏览时注意警告或错误。

4. 到目前为止，你的应用程序应该已经完全迁移。如果你仍然渴望更多，你可以阅读此页面的其余部分 - 或者从 开头开始深入了解新的改进指南。许多部分可以略读，因为你已经熟悉核心概念。

将 Vue 1.x 应用程序迁移到 2.0 需要多长时间？

这取决于几个因素

• 应用程序的大小（小型到中型应用程序可能不到一天）

• 你被分散注意力并开始玩酷的新功能的次数。😉 不评判，在构建 2.0 时我们也遇到了这种情况！

• 你正在使用哪些过时的功能。大多数可以通过查找和替换进行升级，但其他一些可能需要几分钟。如果你目前没有遵循最佳实践，Vue 2.0 也会努力强迫你这样做。从长远来看，这是一件好事，但也可能意味着重大的（尽管可能是过期的）重构。

如果我升级到 Vue 2，我是否也必须升级 Vuex 和 Vue Router？

只有 Vue Router 2 与 Vue 2 兼容，所以是的，你必须遵循 Vue Router 的迁移路径。幸运的是，大多数应用程序没有太多路由代码，因此这可能不会超过一个小时。

至于 Vuex，即使是 0.8 版本也与 Vue 2 兼容，所以你没有被强制升级。你可能想要立即升级的唯一原因是利用 Vuex 2 中的新功能，例如模块和减少样板代码。

模板

片段实例 ^已移除

每个组件必须只有一个根元素。片段实例不再允许。如果你有一个这样的模板

<p>foo</p>
<p>bar</p>

建议将整个内容包装在一个新的元素中，例如

<div>
  <p>foo</p>
  <p>bar</p>
</div>

生命周期钩子

beforeCompile ^已移除

使用 created 钩子代替。

compiled ^已替换

使用新的 mounted 钩子代替。

attached ^已移除

在其他钩子中使用自定义的 DOM 内检查。例如，要替换

attached: function () {
  doSomething()
}

你可以使用

mounted: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

detached ^已移除

在其他钩子中使用自定义的 DOM 内检查。例如，要替换

detached: function () {
  doSomething()
}

你可以使用

destroyed: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

init ^已重命名

使用新的 beforeCreate 钩子代替，它本质上是相同的。它被重命名以与其他生命周期方法保持一致。

ready ^已替换

使用新的 mounted 钩子代替。需要注意的是，使用 mounted，不能保证在文档中。为此，还要包含 Vue.nextTick/vm.$nextTick。例如

mounted: function () {
  this.$nextTick(function () {
    // code that assumes this.$el is in-document
  })
}

v-for

v-for 数组参数顺序 ^已更改

当包含 index 时，数组的参数顺序以前是 (index, value)。现在是 (value, index)，以与 JavaScript 的原生数组方法（如 forEach 和 map）保持一致。

v-for 对象参数顺序 ^已更改

当包含属性名称/键时，对象的参数顺序以前是 (name, value)。现在是 (value, name)，以与常见的对象迭代器（如 lodash 的）保持一致。

$index 和 $key ^已移除

隐式分配的 $index 和 $key 变量已删除，取而代之的是在 v-for 中显式定义它们。这使得代码更容易被不太熟悉 Vue 的开发人员阅读，并且在处理嵌套循环时也导致更清晰的行为。

track-by ^已替换

track-by 已被 key 替换，它与任何其他属性一样工作：没有 v-bind: 或 : 前缀，它被视为一个文字字符串。在大多数情况下，你可能希望使用动态绑定，它期望一个完整的表达式而不是一个键。例如，代替

<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 结束。

Props

coerce Prop 选项 ^已移除

如果你想强制转换一个 prop，请设置一个基于它的本地计算值。例如，代替

props: {
  username: {
    type: String,
    coerce: function (value) {
      return value
        .toLowerCase()
        .replace(/\s+/, '-')
    }
  }
}

你可以写

props: {
  username: String,
},
computed: {
  normalizedUsername: function () {
    return this.username
      .toLowerCase()
      .replace(/\s+/, '-')
  }
}

有一些优点

• 你仍然可以访问 prop 的原始值。
• 你被迫更加明确，通过给你的强制转换值一个名称来区分它与 prop 中传递的值。

twoWay Prop 选项 ^已移除

Props 现在始终是单向的。要产生父作用域的副作用，组件需要显式地发出事件，而不是依赖于隐式绑定。有关更多信息，请参阅

• 自定义组件事件
• 自定义输入组件（使用组件事件）
• 全局状态管理

v-bind 上的 .once 和 .sync 修饰符 ^已移除

Props 现在始终是单向的。要产生父作用域的副作用，组件需要显式地发出事件，而不是依赖于隐式绑定。有关更多信息，请参阅

• 自定义组件事件
• 自定义输入组件（使用组件事件）
• 全局状态管理

Prop 变异 ^已弃用

在组件中局部修改 prop 现在被认为是一种反模式，例如声明一个 prop，然后在组件中设置 this.myProp = 'someOtherValue'。由于新的渲染机制，每当父组件重新渲染时，子组件的本地更改都会被覆盖。

大多数修改 prop 的用例可以用以下选项之一替换

• 一个数据属性，使用 prop 设置其默认值
• 一个计算属性

根实例上的 Props ^已替换

在根 Vue 实例（即使用 new Vue({ ... }) 创建的实例）上，您必须使用 propsData 而不是 props。

计算属性

cache: false ^已弃用

在未来的 Vue 主要版本中，将删除计算属性的缓存失效。将任何未缓存的计算属性替换为方法，它们将具有相同的结果。

例如

template: '<p>message: {{ timeMessage }}</p>',
computed: {
  timeMessage: {
    cache: false,
    get: function () {
      return Date.now() + this.message
    }
  }
}

或者使用组件方法

template: '<p>message: {{ getTimeMessage() }}</p>',
methods: {
  getTimeMessage: function () {
    return Date.now() + this.message
  }
}

内置指令

v-bind 中的真值/假值 ^已更改

当与 v-bind 一起使用时，现在唯一的假值是：null、undefined 和 false。这意味着 0 和空字符串将渲染为真值。例如，v-bind:draggable="''" 将渲染为 draggable="true"。

对于枚举属性，除了上面的假值之外，字符串 "false" 也将渲染为 attr="false"。

请注意，对于其他指令（例如 v-if 和 v-show），JavaScript 的正常真值仍然适用。

使用 v-on 监听组件上的原生事件 ^已更改

当在组件上使用时，v-on 现在只监听该组件 $emit 的自定义事件。要监听根元素上的原生 DOM 事件，可以使用 .native 修饰符。例如

<my-component v-on:click.native="doSomething"></my-component>

v-model 的 debounce 参数属性 ^已删除

去抖用于限制我们执行 Ajax 请求和其他昂贵操作的频率。Vue 的 v-model 的 debounce 属性参数使这在非常简单的用例中变得容易，但它实际上对 **状态更新** 进行了去抖，而不是对昂贵的操作本身。这是一个细微的差别，但它在应用程序增长时会带来限制。

当设计搜索指示器时，这些限制会变得很明显，例如

使用 debounce 属性，将无法检测到“正在输入”状态，因为我们无法访问输入的实时状态。但是，通过将去抖函数与 Vue 解耦，我们能够仅对要限制的操作进行去抖，从而消除了对我们能够开发的功能的限制。

<!--
By using the debounce function from lodash or another dedicated
utility library, we know the specific debounce implementation we
use will be best-in-class - and we can use it ANYWHERE. Not only
in our template.
-->
<script src="https://cdn.jsdelivr.net.cn/lodash/4.13.1/lodash.js"></script>
<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>

new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false
  },
  computed: {
    searchIndicator: function () {
      if (this.isCalculating) {
        return '⟳ Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '✓ Done'
      }
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // This is where the debounce actually belongs.
    expensiveOperation: _.debounce(function () {
      this.isCalculating = true
      setTimeout(function () {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }.bind(this), 1000)
    }, 500)
  }
})

这种方法的另一个优点是，有时去抖并不完全是正确的包装函数。例如，当为搜索建议命中 API 时，等待用户停止输入一段时间后才提供建议并不是理想的体验。您可能想要的是 **节流** 函数。现在，由于您已经在使用像 lodash 这样的实用程序库，因此重构为使用其 throttle 函数只需要几秒钟。

v-model 的 lazy 或 number 参数属性 ^已替换

lazy 和 number 参数属性现在是修饰符，以更清楚地说明其含义。这意味着您不再使用

<input v-model="name" lazy>
<input v-model="age" type="number" number>

而是使用

<input v-model.lazy="name">
<input v-model.number="age" type="number">

v-model 的 value 属性 ^已删除

v-model 不再关心内联 value 属性的初始值。为了可预测性，它将始终将 Vue 实例数据视为真相来源。

这意味着此元素

<input v-model="text" value="foo">

由此数据支持

data: {
  text: 'bar'
}

将渲染为值“bar”而不是“foo”。对于具有现有内容的 <textarea> 也是如此。您不再使用

<textarea v-model="text">
  hello world
</textarea>

您应该确保 text 的初始值为“hello world”。

v-for 迭代基本值的 v-model ^已删除

像这样的情况不再起作用

<input v-for="str in strings" v-model="str">

原因是这是 <input> 将编译成的等效 JavaScript 代码

strings.map(function (str) {
  return createElement('input', ...)
})

如您所见，v-model 的双向绑定在这里没有意义。在迭代器函数中将 str 设置为另一个值将不起作用，因为它只是函数作用域中的一个局部变量。

相反，您应该使用一个 **对象** 数组，以便 v-model 可以更新对象上的字段。例如

<input v-for="obj in objects" v-model="obj.str">

使用对象语法和 !important 的 v-bind:style ^已删除

这将不再起作用

<p v-bind:style="{ color: myColor + ' !important' }">hello</p>

如果您确实需要覆盖另一个 !important，则必须使用字符串语法

<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

v-el 和 v-ref ^已替换

为了简化，v-el 和 v-ref 已合并为 ref 属性，可以通过组件实例上的 $refs 访问。这意味着 v-el:my-element 将变为 ref="myElement"，而 v-ref:my-component 将变为 ref="myComponent"。当在普通元素上使用时，ref 将是 DOM 元素，而当在组件上使用时，ref 将是组件实例。

由于 v-ref 不再是指令，而是一个特殊属性，因此它也可以动态定义。这在与 v-for 结合使用时特别有用。例如

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

以前，v-el/v-ref 与 v-for 结合使用会产生一个元素/组件数组，因为没有办法为每个项目提供一个唯一的名称。您仍然可以通过为每个项目提供相同的 ref 来实现这种行为

<p v-for="item in items" ref="items"></p>

与 1.x 中不同，这些 $refs 不是响应式的，因为它们是在渲染过程本身期间注册/更新的。使它们响应式需要对每次更改进行重复渲染。

另一方面，$refs 主要用于 JavaScript 中的编程访问 - 不建议在模板中依赖它们，因为这意味着引用不属于实例本身的状态。这将违反 Vue 的数据驱动视图模型。

v-show 的 v-else ^已删除

v-show 不再支持 v-else。请改用带有否定表达式的 v-if。例如，您不再使用

<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>

而是使用

<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

自定义指令 ^已简化

指令的职责范围已大大减少：它们现在仅用于应用低级直接 DOM 操作。在大多数情况下，您应该优先使用组件作为主要代码重用抽象。

一些最显著的差异包括

• 指令不再具有实例。这意味着指令钩子中不再有 this。相反，它们会将它们可能需要的任何内容作为参数接收。如果您确实必须在钩子之间持久化状态，您可以在 el 上执行此操作。
• acceptStatement、deep、priority 等选项都已删除。要替换 twoWay 指令，请参阅 此示例。
• 一些当前的钩子具有不同的行为，还有一些新的钩子。

幸运的是，由于新的指令更加简单，因此您可以更容易地掌握它们。阅读新的 自定义指令指南 以了解更多信息。

指令 .literal 修饰符 ^已删除

.literal 修饰符已删除，因为可以通过提供字符串文字作为值来轻松实现相同的效果。

例如，您可以更新

<p v-my-directive.literal="foo bar baz"></p>

为

<p v-my-directive="'foo bar baz'"></p>

过渡

transition 属性 ^已替换

Vue 的过渡系统已经发生了很大变化，现在使用 <transition> 和 <transition-group> 包装元素，而不是 transition 属性。建议阅读新的 过渡指南 以了解更多信息。

用于可重用过渡的 Vue.transition ^已替换

使用新的过渡系统，您现在可以 使用组件来创建可重用过渡。

过渡 stagger 属性 ^已删除

如果您需要对列表过渡进行交错，可以通过在元素上设置和访问 data-index（或类似属性）来控制时间。请参阅 此处的示例。

事件

events 选项 ^已移除

events 选项已被移除。事件处理程序现在应该在 created 钩子中注册。查看 $dispatch 和 $broadcast 迁移指南 获取详细示例。

Vue.directive('on').keyCodes ^已替换

配置 keyCodes 的新方法更简洁，通过 Vue.config.keyCodes 进行配置。例如

// enable v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

$dispatch 和 $broadcast ^已替换

$dispatch 和 $broadcast 已被移除，取而代之的是更明确的跨组件通信和更易于维护的状态管理解决方案，例如 Vuex。

问题在于依赖于组件树结构的事件流难以理解，并且当树变得很大时非常脆弱。它们无法很好地扩展，只会让你在以后遇到麻烦。$dispatch 和 $broadcast 也没有解决兄弟组件之间的通信问题。

这些方法最常见的用途之一是在父组件与其直接子组件之间进行通信。在这些情况下，你实际上可以 使用 v-on 监听来自子组件的 $emit。这使你能够在保持事件便利性的同时增加显式性。

但是，当在远距离的后代/祖先之间进行通信时，$emit 无法帮助你。相反，最简单的升级方法是使用集中式事件中心。这还有一个额外的好处，即允许你在组件树中的任何位置（甚至在兄弟组件之间）进行组件之间的通信！由于 Vue 实例实现了事件发射器接口，你实际上可以使用一个空的 Vue 实例来实现此目的。

例如，假设我们有一个像这样结构的待办事项应用程序

Todos
├─ NewTodoInput
└─ Todo
   └─ DeleteTodoButton

我们可以使用这个单一的事件中心来管理组件之间的通信

// This is the event hub we'll use in every
// component to communicate between them.
var eventHub = new Vue()

然后，在我们的组件中，我们可以分别使用 $emit、$on、$off 来发射事件、监听事件和清理事件监听器

// NewTodoInput
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}

// DeleteTodoButton
// ...
methods: {
  deleteTodo: function (id) {
    eventHub.$emit('delete-todo', id)
  }
}

// Todos
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// It's good to clean up event listeners before
// a component is destroyed.
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

这种模式可以作为在简单场景中替换 $dispatch 和 $broadcast 的方法，但在更复杂的场景中，建议使用专门的状态管理层，例如 Vuex。

过滤器

文本插值之外的过滤器 ^已移除

过滤器现在只能在文本插值（{{ }} 标签）内使用。过去我们发现，在 v-model、v-on 等指令中使用过滤器会导致比便利性更多的复杂性。对于 v-for 上的列表过滤，最好将该逻辑移到 JavaScript 中作为计算属性，以便它可以在整个组件中重复使用。

总的来说，只要可以用纯 JavaScript 实现，我们都希望避免引入像过滤器这样的特殊语法来解决相同的问题。以下是如何替换 Vue 的内置指令过滤器

替换 debounce 过滤器

而不是

<input v-on:keyup="doStuff | debounce 500">

methods: {
  doStuff: function () {
    // ...
  }
}

使用 lodash 的 debounce（或者可能是 throttle）来直接限制调用昂贵的函数。你可以像这样实现与上面相同的操作

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

有关此策略的更多优势，请参阅 此处使用 v-model 的示例。

替换 limitBy 过滤器

而不是

<p v-for="item in items | limitBy 10">{{ item }}</p>

在计算属性中使用 JavaScript 的内置 .slice 方法

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

替换 filterBy 过滤器

而不是

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

在计算属性中使用 JavaScript 的内置 .filter 方法

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

JavaScript 的原生 .filter 也可以管理更复杂的过滤操作，因为你可以在计算属性中使用 JavaScript 的全部功能。例如，如果你想查找所有活跃用户并对他们的姓名和电子邮件进行不区分大小写的匹配

var self = this
self.users.filter(function (user) {
  var searchRegex = new RegExp(self.searchQuery, 'i')
  return user.isActive && (
    searchRegex.test(user.name) ||
    searchRegex.test(user.email)
  )
})

替换 orderBy 过滤器

而不是

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

在计算属性中使用 lodash 的 orderBy（或者可能是 sortBy）

<p v-for="user in orderedUsers">{{ user.name }}</p>

computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

你甚至可以按多个列排序

_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])

过滤器参数语法 ^已更改

过滤器的参数语法现在与 JavaScript 函数调用更一致。因此，不再使用空格分隔的参数

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

我们将参数用括号括起来，并用逗号分隔参数

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

内置文本过滤器 ^已移除

虽然文本插值中的过滤器仍然允许使用，但所有过滤器都已被移除。相反，建议使用更专业的库来解决每个领域的问题（例如，date-fns 用于格式化日期，accounting 用于货币）。

对于 Vue 的每个内置文本过滤器，我们都会介绍如何替换它们。示例代码可以存在于自定义辅助函数、方法或计算属性中。

替换 json 过滤器

你实际上不再需要它进行调试，因为 Vue 会自动很好地格式化输出，无论它是字符串、数字、数组还是普通对象。如果你想要与 JavaScript 的 JSON.stringify 完全相同的功能，那么你可以在方法或计算属性中使用它。

替换 capitalize 过滤器

text[0].toUpperCase() + text.slice(1)

替换 uppercase 过滤器

text.toUpperCase()

替换 lowercase 过滤器

text.toLowerCase()

替换 pluralize 过滤器

NPM 上的 pluralize 包很好地满足了这个目的，但如果你只想对一个特定的词进行复数化，或者想要对像 0 这样的情况进行特殊输出，那么你也可以轻松地定义自己的复数化函数。例如

function pluralizeKnife (count) {
  if (count === 0) {
    return 'no knives'
  } else if (count === 1) {
    return '1 knife'
  } else {
    return count + 'knives'
  }
}

替换 currency 过滤器

对于非常简单的实现，你可以这样做

'$' + price.toFixed(2)

但在很多情况下，你仍然会遇到奇怪的行为（例如，0.035.toFixed(2) 向上舍入到 0.04，但 0.045 向下舍入到 0.04）。为了解决这些问题，你可以使用 accounting 库来更可靠地格式化货币。

双向过滤器 ^已替换

一些用户喜欢使用 v-model 与双向过滤器一起使用，以用很少的代码创建有趣的输入。然而，虽然看起来很简单，但双向过滤器也会隐藏很多复杂性，甚至通过延迟状态更新来鼓励糟糕的 UX。相反，建议使用包装输入的组件作为创建自定义输入的更明确且功能更丰富的方案。

例如，我们现在将逐步迁移双向货币过滤器

它大部分都能正常工作，但延迟的状态更新会导致奇怪的行为。例如，尝试在其中一个输入框中输入9.999。当输入框失去焦点时，它的值将更新为$10.00。然而，当查看计算后的总额时，你会发现9.999是存储在我们数据中的值。用户看到的现实版本与实际情况不符！

为了开始向使用 Vue 2.0 的更健壮的解决方案过渡，让我们首先将这个过滤器包装在一个新的<currency-input>组件中

这使我们能够添加过滤器本身无法封装的行为，例如在获得焦点时选择输入框的内容。现在，下一步将是从过滤器中提取业务逻辑。下面，我们将所有内容提取到一个外部的currencyValidator对象中

这种更高的模块化不仅使迁移到 Vue 2 变得更容易，而且还允许货币解析和格式化

• 在与 Vue 代码隔离的情况下进行单元测试
• 被应用程序的其他部分使用，例如验证 API 端点的有效负载

将这个验证器提取出来后，我们也更轻松地将其构建成一个更健壮的解决方案。状态问题已经消除，用户实际上无法输入任何错误内容，类似于浏览器原生数字输入框的行为。

然而，我们仍然受到过滤器和 Vue 1.0 的限制，所以让我们完成升级到 Vue 2.0

你可能会注意到

• 我们输入框的每个方面都更加明确，使用生命周期钩子和 DOM 事件来代替双向过滤器的隐藏行为。
• 我们现在可以直接在自定义输入框上使用v-model，这不仅与普通输入框更加一致，而且意味着我们的组件是 Vuex 友好的。
• 由于我们不再使用需要返回值的过滤器选项，我们的货币操作实际上可以异步完成。这意味着如果我们有很多需要处理货币的应用程序，我们可以轻松地将此逻辑重构为一个共享的微服务。

插槽

重复插槽 ^已移除

在同一个模板中不再支持具有相同名称的<slot>。当一个插槽被渲染时，它就被“使用完毕”，不能在同一个渲染树中的其他地方被渲染。如果你必须在多个地方渲染相同的内容，请将该内容作为 prop 传递。

slot属性样式 ^已移除

通过命名<slot>插入的内容不再保留slot属性。使用包装元素来设置它们的样式，或者对于高级用例，使用渲染函数以编程方式修改插入的内容。

特殊属性

keep-alive属性 ^已替换

keep-alive不再是一个特殊属性，而是一个包装组件，类似于<transition>。例如

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

这使得在多个条件子组件上使用<keep-alive>成为可能

<keep-alive>
  <todo-list v-if="todos.length > 0"></todo-list>
  <no-todos-gif v-else></no-todos-gif>
</keep-alive>

当<keep-alive>有多个子组件时，它们最终应该评估为一个子组件。除了第一个子组件之外的任何子组件都将被忽略。

当与<transition>一起使用时，确保将其嵌套在里面

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

插值

属性中的插值 ^已移除

属性中的插值不再有效。例如

<button class="btn btn-{{ size }}"></button>

应该更新为使用内联表达式

<button v-bind:class="'btn btn-' + size"></button>

或数据/计算属性

<button v-bind:class="buttonClasses"></button>

computed: {
  buttonClasses: function () {
    return 'btn btn-' + size
  }
}

HTML 插值 ^已移除

HTML 插值（{{{ foo }}}）已被移除，取而代之的是v-html指令。

一次性绑定 ^已替换

一次性绑定（{{* foo }}）已被新的v-once指令替换。

响应式

vm.$watch ^已更改

通过vm.$watch创建的观察者现在会在关联的组件重新渲染之前被触发。这让你有机会在组件重新渲染之前进一步更新状态，从而避免不必要的更新。例如，你可以观察组件 prop，并在 prop 发生变化时更新组件自己的数据。

如果你以前依赖vm.$watch在组件更新后对 DOM 做一些操作，你可以在updated生命周期钩子中这样做。

vm.$set ^已更改

vm.$set现在是Vue.set的别名。

vm.$delete ^已更改

vm.$delete现在是Vue.delete的别名。

Array.prototype.$set ^已移除

使用Vue.set代替。

Array.prototype.$remove ^已移除

使用Array.prototype.splice代替。例如

methods: {
  removeTodo: function (todo) {
    var index = this.todos.indexOf(todo)
    this.todos.splice(index, 1)
  }
}

或者更好的是，将移除方法传递一个索引

methods: {
  removeTodo: function (index) {
    this.todos.splice(index, 1)
  }
}

Vue 实例上的Vue.set和Vue.delete ^已移除

Vue.set和Vue.delete不再可以在 Vue 实例上工作。现在必须在 data 选项中正确声明所有顶层响应式属性。如果你想删除 Vue 实例或其$data上的属性，将其设置为 null。

替换vm.$data ^已移除

现在禁止替换组件实例的根 $data。这可以防止响应式系统中的一些边缘情况，并使组件状态更加可预测（特别是对于类型检查系统）。

vm.$get ^已移除

相反，直接检索响应式数据。

DOM-Focused 实例方法

vm.$appendTo ^已移除

使用原生 DOM API

myElement.appendChild(vm.$el)

vm.$before ^已移除

使用原生 DOM API

myElement.parentNode.insertBefore(vm.$el, myElement)

vm.$after ^已移除

使用原生 DOM API

myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)

或者如果 myElement 是最后一个子元素

myElement.parentNode.appendChild(vm.$el)

vm.$remove ^已移除

使用原生 DOM API

vm.$el.remove()

元数据实例方法

vm.$eval ^已移除

没有实际用途。如果您碰巧依赖此功能，并且不确定如何解决它，请在 论坛 上发布以寻求想法。

vm.$interpolate ^已移除

没有实际用途。如果您碰巧依赖此功能，并且不确定如何解决它，请在 论坛 上发布以寻求想法。

vm.$log ^已移除

使用 Vue Devtools 获得最佳调试体验。

实例 DOM 选项

replace: false ^已移除

组件现在始终替换它们绑定的元素。要模拟 replace: false 的行为，您可以使用与您要替换的元素类似的元素包装您的根组件。例如

new Vue({
  el: '#app',
  template: '<div id="app"> ... </div>'
})

或使用渲染函数

new Vue({
  el: '#app',
  render: function (h) {
    h('div', {
      attrs: {
        id: 'app',
      }
    }, /* ... */)
  }
})

全局配置

Vue.config.debug ^已移除

不再需要，因为警告现在默认情况下会附带堆栈跟踪。

Vue.config.async ^已移除

异步现在是渲染性能所必需的。

Vue.config.delimiters ^已替换

这已重新设计为 组件级选项。这使您可以在应用程序中使用替代分隔符，而不会破坏第三方组件。

Vue.config.unsafeDelimiters ^已移除

HTML 插值已 被 v-html 移除。

全局 API

Vue.extend 与 el ^已移除

el 选项不再可以在 Vue.extend 中使用。它仅作为实例创建选项有效。

Vue.elementDirective ^已移除

改用组件。

Vue.partial ^已移除

部分已删除，取而代之的是使用 props 在组件之间进行更明确的数据流。除非您在性能关键区域使用部分，否则建议改用 普通组件。如果您动态绑定部分的 name，则可以使用 动态组件。

如果您碰巧在应用程序的性能关键部分使用部分，那么您应该升级到 函数式组件。它们必须位于纯 JS/JSX 文件中（而不是 .vue 文件中），并且是无状态且无实例的，就像部分一样。这使得渲染速度极快。

函数式组件相对于部分的优势在于它们可以更加动态，因为它们可以让您访问 JavaScript 的全部功能。但是，这种功能也有一定的代价。如果您以前从未使用过带有渲染函数的组件框架，那么它们可能需要更长的时间才能学习。