【译】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: {
    messagenull
  }  
});
</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

1 Response

发表评论