【译】Vue.js最受期待的5个特性

Vue因为轻量易上手出名，它有一些短小精悍的API来实现一些特性。

这里，开发者和维护团队也有在考虑一些有用的新功能。 本文讨论了Vue的GitHub问题列表中最受期待的五个功能。

1. 支持v-for的可迭代协议

2. 模板 支持多个根节点

3. 可响应的refs

4. 自定义v-model修饰符

5. 自定义渲染器打包

了解这些功能是很好的，因为有些功能将在Vue的下一个版本实现，而有些功能可能会帮助你更好地理解Vue的设计。

1.支持v-for的可迭代协议

这是什么？

当你想到迭代时，你很可能会想到数组。 ES2015引入了可迭代协议，该协议在实现时允许使用for …来迭代任何类型的对象。 ES2015还引入了新的可迭代数据类型，如Map和Set。

目前，Vue的v-for指令可以迭代数组和普通对象，但不能迭代其他可迭代对象或数据类型。例如，如果您正在使用Map类型，想要使用v-for进行迭代，那必须 先 将其转换为数组或普通对象。

注意：maps，sets和其他新的可迭代数据类型也不是响应式的。

为什么开发者需要这个？

由于可迭代对象和数据类型现在正式成为JavaScript语言的一部分，因此应用不可避免地会用它们，因为它们能提供便利。

如果将Vue用作此类应用的UI层，那么这些对象和数据类型要么无法在模板中迭代，要么需要通过转换函数来实现。

这个功能后面会实现吗？

有可能。这个问题已在GitHub上被关闭，因为维护团队认为可迭代对象和数据类型通常 不 会用于UI状态。另外，将可迭代对象和数据类型改成响应式要相当多的工作量。

但是，Vue的监听系统将在版本2.x-next中重构，可能是实现这功能的理想时间。

2.多个根节点模板

这是什么？

目前，Vue模板有单个根节点的限制。下面这是没问题的：

<template>
  <div/>
</template>

但这不行：

<template>
  <div/>
  <div/>
</template>

一些Vue用户希望支持多个根节点模板，特别是现在React已经有这个功能了。

为什么开发者需要这个？

如果你希望你的组件为某些父元素呈现多个子节点，则需要添加一个外层节点以符合单个根节点的限制：

<template>
  <div><!--Need to add this wrapper-->
    <child1/>
    <child2/>
    ...
  </div>
</template>

但在结构中包含一个外层节点会干扰到某些HTML或CSS的属性。例如，如果你外层具有display:flex属性，那么父元素和子元素之间的外层节点将不起作用。

<template>
  <div style="display:flex">
    <!--This pattern won't work because of the wrapper:/-->
    <FlexChildren/>
  </div>
</template>

这个功能后面会实现吗？

根据维护者的说法，虚拟DOM的diffing算法的工作方式使得这个功能难以实现，并且需要大量的重写。因此，此功能不在开发的计划中。

3.可响应的refs

这是什么？

Vue组件的一个基本设计是它们必须通过props和事件进行独立和通信。然而，有时您需要一个组件能够改变另一个组件的状态。例如，您可能想要一个表单组件来切换子输入框组件的焦点状态。

解决方案是使用refs，它为组件提供了一个到另一个组件数据模型的途径。但是，当通过refs访问时，组件的数据模型不是可响应的，因此无法监听或包含在计算属性中。响应式的refs则允许它这样。

为什么开发者需要这个？

组件通常通过props和events进行通信，并且仅在父/子关系中进行通信。要使父组件跟踪子组件的数据，子组件必须通过事件发出其状态更改。这要求父级要有一个监听器，一个处理方法和本地数据属性去存储和跟踪状态。

举个例子，想象一个父表单组件监听子元素输入框的“有效”状态：

<template>
  <form-input @valid="updateValidEmail">
</template
<script>
export default {
  data() => ({
    emailValid: false  
  }),
  methods: {
    updateValidEmail(value) {
      this.emailValid = value;
    }
  }
}
</script>

这段代码是正常可用的。唯一的问题是表单中的每个输入框都需要类似的唯一代码。如果表单有10个或100个输入框，表单组件将变得庞大。

使用响应式refs，父级不需要监听子元素，只需使用计算属性查看其状态，从而减少过多的代码。

<template>
  <form-input ref="email">
</template
<script>
export default {
  computed: {
    emailValid() {
      // Currently this won't work as $refs is not reactive
      this.$refs.email.isValid;
    }
  }
}
</script>

这个功能后面会实现吗？

虽然这是一个强烈要求的功能，但并没有计划添加它。一个问题是该功能违反了良好的组件设计。当不能使用props/events时， refs只是最后迫不得已的手段。

4.自定义v-model修饰符

这是什么？

您可以使用v-model指令在表单输入上实现双向数据绑定：

<input v-model="message"/>
<!--Message automatically updates as the input is used-->
<p>Message is: {{ message }}</p>
<script>
new Vue({
  data: {
    message: null
  }  
});
</script>

v-model是prop和时间监听的语法糖。

有几个修饰符可用于转换事件。例如，像v-model.number =“num”一样，使用的.number修饰符将自动将输入作为数字进行类型转换。这很有用，如果输入中有type =“number”，HTML输入元素返回的值也总是一个字符串。

这个功能允许用户自定义v-model修饰符。

为什么开发者需要这个？

假设您想要将用户输入的泰语电话号码自动格式化为输入，例如，键入“0623457654”将转换为“+66 6 2345 7654”。您可以编写自定义修饰符，例如.thaiphone，并在输入中使用它。这很方便简单。

但如果没有此功能，则需要为每个输入创建计算属性来执行转换，或者需要在发出事件之前创建转换逻辑的自定义输入组件。这两种方法都可以，但需要额外的代码，这些代码是没必要的。

这个功能后面会实现吗？

不太可能。维护人员已经关闭了这个问题和相关问题，他们推荐了刚才提到的解决方法。

5.自定义渲染器打包

这是什么？

目前，Vue的渲染器是针对HTML元素硬编码 的 ，因为Vue最初仅用于在Web上。 此功能的想法是将HTML渲染与主Vue包分离。

为什么开发者需要这个？

Vue现在还会在非web环境中使用，例如通过像NativeScript这样的项目在移动设备上使用。分离渲染器可以让库作者更方便的选择自己环境的渲染器，而不是 HTML渲染。

Vue.use(NonWebRenderer);

new Vue({
  render(h) => h('non-web-element', { text: 'Hello World' });
});

这个功能后面会实现吗？

会! 这将是一个更大变化的一部分，其中许多Vue内部将被拆分为具有自己API的独立包，从而支持这种和其他类型的Vue定制构建。这个更改已添加到Vue.js规划图中，并且定于版本3.x进行更改。

原文链接:https://vuejsdevelopers.com/2018/09/17/highly-requested-new-vue-js-features

始发于微信公众号： 腾讯DeepOcean