Geekly articles weekly

Vue.js 2.6概述

哈Ha！

很快，应该发布新版本的Vue.js-2.6。 在剪切下，您将概览下一版本的新功能，包括新的插槽语法Vue.observable（）等！


1.范围槽的新语法


这是最重大的变化之一。 它包括：

  • 新的v-slot指令结合了slot和slot-scope
  • 使用命名作用域槽的快捷方式

理解这一点的最简单方法是使用示例：

在Vue@2.5.22版本中如何使用作用域插槽：

<template> <TestComponent> <!--  scoped slot --> <div slot-scope="{ message }"> {{ `Default slot with message: ${message}` }} </div> <!--  scoped slot --> <div slot="text" slot-scope="{ text }"> {{ `Named slot with text: ${text}` }} </div> </TestComponent> </template>

我现在该如何：

 <template> <TestComponent> <!--  scoped slot --> <template v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </template> <!--  scoped slot --> <template v-slot:text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>

对于默认插槽，如果不使用命名插槽，则可以使用特殊语法：

 <template> <!-- v-slot     --> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template>

这是命名插槽的快捷方式：

 <template> <TestComponent> <!-- # -    v-slot: --> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>

可以在没有任何范围变量的情况下使用new指令，但是该插槽仍将落入父级的$ scopedSlots中。

参考文献：

  1. 新的v槽语法

  2. V型槽的快捷方式


2.指令的动态参数


如果要为v-bind或v-on使用动态参数，则在Vue@2.5.22中，只有一个选项：

 <div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div>

但是他有两个缺点：

  • 并非所有人都知道在对象上使用v-bind / v-on的可能性以及动态变量名
  • vue-template-compier生成效率低下的代码
  • v槽没有类似的对象语法

为了摆脱它们，Vue @ 2.6.0引入了新的语法：

 <div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div>

使用示例：

 <template> <div> <!-- v-bind    --> <div v-bind:[key]="value"></div> <!--  v-bind    --> <div :[key]="value"></div> <!-- v-on    --> <div v-on:[event]="handler"></div> <!--  v-on    --> <div @[event]="handler"></div> <!-- v-slot    --> <TestComponent> <template v-slot:[name]> Hello </template> </TestComponent> <!--  v-slot    --> <TestComponent> <template #[name]> Cool slot </template> </TestComponent> </div> </template>

参考文献：


3.使用Vue.observable（）创建反应对象


以前，要创建反应式对象，必须将其粘贴在vue组件实例中。 现在，我们有一个使对象具有反应性的单独方法-Vue.observable（）。

反应对象可以安全地用于渲染和计算功能中。

用法示例：

 import Vue from vue; const state = Vue.observable({ counter: 0, }); export default { render() { return ( <div> {state.counter} <button v-on:click={() => { state.counter++; }}> Increment counter </button> </div> ); }, };

4.在服务器上下载数据


在新的更新中，vue-server-renderer更改了SSR的数据加载策略。

以前，建议我们在通过router.getMatchedComponents（）获得的组件上调用asyncData（）方法。

新版本为组件引入了一种特殊的方法-serverPrefetch（）。 vue-server-renderer将在每个组件上调用它，并等待已解决的promise得以解决：

 <template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { //    async serverPrefetch() { await this.fetchItem(); }, computed: { item() { return this.$store.state.item; }, }, //    mounted() { if (!this.item) { this.fetchItem(); } }, methods: { async fetchItem() { await this.$store.dispatch('fetchItem'); }, }, }; </script>

为了找出等待所有serverPrefetch（）的时间以及应用程序完成其渲染的时间，可以在服务器渲染功能的上下文中添加一个render（）钩子：

 /*  entry-server.js */ import { createApp } from './app'; export default context => new Promise((resolve, reject) => { const { app, router, store } = createApp(); const { url } = context; router.push(url); router.onReady(() => { context.rendered = () => { //       serverPrefetch() context.state = store.state; }; resolve(app); }, reject); });

5.改进的编译器错误输出


将html编译为渲染函数时，vue-template-compiler可能会引发错误。 Vue用来显示错误的描述而不显示错误的位置，现在新版本将显示错误的位置。

一个例子：

 <template> <div> <template key="test-key"> {{ message }} </template> </div> </template>

错误vue-template-compiler@2.5.22：

  Error compiling template: <div> <template key="test-key"> {{ message }} </template> </div> - <template> cannot be keyed. Place the key on real elements instead.

新错误输出vue-template-compiler@2.6.0：

  Errors compiling template: <template> cannot be keyed. Place the key on real elements instead. 1 | 2 | <div> 3 | <template key="test-key"> | ^^^^^^^^^^^^^^ 4 | {{ message }} 5 | </template>

6.捕捉异步错误


现在，Vue甚至可以捕获生命周期挂钩和事件处理程序中的异步错误。

一个例子：

 /* TestComponent.vue */ <template> <div @click="doSomething()"> Some message </div> </template> <script> export default { methods: { async doSomething() { await this.$nextTick(); throw new Error('Another Error'); }, }, async mounted() { await this.$nextTick(); throw new Error('Some Error'); }, }; </script>

挂载后错误：

 [Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"

点击后出现错误：

 [Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"

7. ESM浏览器的新版本


在新版本中，添加了另一个Vue程序集-vue.esm.browser.js。 它是为支持ES6模块的浏览器设计的。

其特点：

  • 在渲染函数中包含HTML编译器
  • 使用ES6模块语法
  • 包含未翻译的代码

用法示例：

 <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> //    vue.esm.js, //    , //        import Vue from 'path/to/vue.esm.browser.js'; new Vue({ el: '#app', data() { return { message: 'Hello World!', }; }, }); </script> </body> </html>

老实说，我希望看到另一个程序集-与vue.esm.browser.js相同，但没有HTML编译器。 这样，当我在组装过程中编译模板时，便可以为使用ES6模块的浏览器提供更多最新代码。

8. v-bind.prop的缩写


v-bind指令具有特殊的修饰符-.prop。 您可以在文档中看到他在做什么。 我本人从未使用过它，我无法想象何时值得使用它。

现在有一个特殊的缩写：代替编写v-bind：someProperty.prop =“ foo”，您可以编写.someProperty =“ foo”。

一个例子：

就像在Vue@2.5.22上一样：

 <template> <div> <div v-bind:textContent.prop="'Important text content'" /> <!--    --> <div :textContent.prop="'Important text content'" /> </div> </template>

尽可能在Vue@2.6.0：

 <template> <div .textContent="'Important text content'" /> </template>

9.支持自定义的toString（）


一切都很简单：如果您覆盖对象的toString（）方法，则Vue在显示时将使用它而不是JSON.stringify（）。

一个例子：

 /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script>

在版本Vue@2.5.22中，我们将在屏幕上看到：

 { "value": "qwerty" }

在Vue@2.6.0版本中：

 Hello Habr!

10. v-for与可迭代对象一起工作


在新版本中，v-for可以与实现可迭代协议的任何对象一起使用，例如Map或Set。 是的，对于版本2.X中的Map和Set，将不支持反应性。

一个例子：

 /* TestComponent.vue */ <template> <div> <div v-for="item in items" :key="item" > {{ item }} </div> </div> </template> <script> export default { data() { return { items: new Set([4, 2, 6]), }; }, }; </script>


通过安装Beta版本的Vue，您可以立即看到所有正在使用的新功能：
 npm i vue@2.6.0-beta.3

如果在组装过程中编译vue文件或使用SSR，请确保添加相同版本的vue-template-compiler和vue-server-renderer：
 npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3


更新： Vue 2.6已正式发布， 在这里您可以阅读Evan的帖子。

感谢您阅读本文的结尾！

Source: https://habr.com/ru/post/zh-CN437582/

More articles:


All Articles