查看原文
其他

【第1008期】详解 Vue 2.4.0 带来的 4 个重大变化

张婧雅 前端早读课 2019-06-04

前言

今日早读文章由美团点评金融前端团队 Vue 生态重度用户 @ 张婧雅 翻译投稿分享。

正文从这开始~

实践解决方案是简单的,但思考的过程才是值得我们探索的。

本周Vue.js发布了有着丰富新特性和更加优化的2.4.0版本。

在这篇文章中,我将跟大家分享4个有突破性新特性。

  • 服务端渲染异步组件

  • 包裹组件内实现属性继承

  • 异步组件支持webpack3

  • 组件渲染后可保留HTML 注释

1、服务端渲染异步组件

在vue2.4.0以前版本,由于无法支持服务端渲染异步组件,导致他们通常在SSR中被忽略,只能等待在客户端渲染。新版本使异步组件有着突破性的进展,同时修复这问题可以让Vue更好的实现PWAs。

异步组件

异步组件是非常方便的,简而言之,它能让你的应用代码分离,使非必要组件(比如模态,选项卡,折叠内容,其他页面等)在首页加载后延迟加载, 从而让用户更快的看到主页。

假如你决定以异步方式加载内容,主组件可能如下所示:

<template>
 <div id="app">
   <!--Above-the-fold-->
   <sync-component></sync-component>

   <!--Below-the-fold-->
   <async-component></async-component>
 </div>
</template>
<script>

import SyncComponent from './SyncComponent.vue';
const AsyncComponent = import('./AsyncComponent.vue');

export default {
 components: {
   SyncComponent,
   AsyncComponent
 }
}
</script>

通过使用webpack的动态import 函数,可使异步组件将在服务端页面后,通过ajax请求被加载。不足就是,当加载中用户可能只能看到微调框或者是空白区域。

这可以通过服务端渲染来改进,被标记的异步组件可以在初始页面内渲染,避免出现微调框或者空白区域,提高用户体验。

VUE2.4.0增加server-rendered属性使其变得可能。SSR中主组件输出如下。

<div id="app" server-rendered="true">
   <!--Above-the-fold-->
   <div>
     Whatever sync-component renders as...
   </div>
   <!--Below-the-fold-->
</div>

从VUE2.4.0开始,异步组件将被包含在SSR输出内容中,因此你有无白屏用户体验的进行VUE程序代码分离。

2、组件内新增实现属性继承

VUE中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当你想向嵌套层级比较深组件数据传递,只能由父组件传递给子组件,子组件再传递给孙子组件...像下面这样

<parent-component :passdown="passdown">
 <child-component :passdown="passdown">
   <grand-child-component :passdown="passdown">
     Finally, here's where we use {{ passdown }}!

demo中只有一两个属性还好,试想一下,当在一个真实的项目中,你可能有非常非常多的属性需要传递时,那是怎样一种恐怖的场景。

事件总线模式或者vuex也可以解决跨非直接父子组件通信的问题,但VUE2.4.0版本提供了一种新的解决方案。事实上,这个新功能是有两个独立却相关的部分组成,首先,组件支持inheritAttrs的选项,其次需用到实例属性$attrs。我们通过一个例子来看它是如何工作的。

例子

我们首先绑定两个属性在组件上,propa是组件自己需要使用的,而propb只是组件需要向下传递的一个属性

<my-component :propa="propa" :propb="propb"></my-component>

在Vue2.4.0之前版本,组件内未被注册的属性将作为普通html元素属性被渲染。所以你组件可能定义起来像是这样

<template>
 <div>{{ propa }}</div>
</template>
<script>
export default {
 props: [ 'propa' ]
}
</script>

它将渲染成下面的样子

<div propb="propb">propa</div>

propb仅仅被渲染普通html属性,如果想让属性能够向下传递,即使prop组件没有被使用,你也需要在组件上注册。

export default {
 props: [
   'propa',
   'propb' // 注册后才能向下传递
 ]
}

这样做会使组件预期功能变得模糊不清,同时也难以维护组件的DRY。在Vue2.4.0,可以在组件定义中添加inheritAttrs:false,组件将不会把未被注册的propb呈现为普通的HTML属性。渲染效果如下:

<div>propa</div>

向下传递prop

虽然prop在组件中没有出现,但通过组件实例的$attrs(也是Vue2.4.0新增功能)获取。组件的$attrs包含所有未被注册的props

<template>
 <div>
 {{ propa }}
 <grand-child v-bind:propb="$attrs.propb"></grand-child>
 </div>
</template>
<script>
 export default {
   props: [ 'propa' ],
   inheritAttrs: false
 }
</script>

想象当你需要向多个嵌套层级中,传递上千百个属性时,这个特性使你的在每个中间组件属性定义变得相当简洁。

<input v-bind="$attrs">

当然,也可以通过这种方式用v-on绑定事件监听传递函数

<div>
 <input v-bind="$attrs" v-on="$listeners">
</div>

3、异步组件支持webpack3

作用域提升是最近发布的webpack3的关键功能之一。webpack 1和2是将模块打包到一个独立的函数作用域内。通过新的ES2015模块语法实现的范围提升方法在浏览器中的执行速度,比老的独立范围的方式要快的多。

两个星期以前,vue-loaderv13.0.0发布了,并将.vue文件作为ES模块输出,这使得vue能够享受新的变量提升带来的便利。

由于ES模块导出方式不同,在Vue项目中用于代码拆分的简洁的异步组件语法

例如

const Foo = () => import('./Foo.vue');

// 将改为:
const Foo = () => import('./Foo.vue').then(m => m.default);

然而在Vue2.4.0在处理异步组件时,将自动解析为ES模块默认导出,允许以前更简洁的语法。

4、保留HTML注释

好吧,这个功能看起来并不是那么的重要,然我仍然觉得很酷。在Vue2.4.0之前版本,注释将被省略

<template>
 <div>Hello <!--I'm a comment.--></div>
</template>

渲染后:

<div>Hello</div>

问题是,有些注释需要被渲染在页面中,有些库可能需要这些注释。

在Vue2.4.0,你可以使用comments选项开启注释

<template>
 <div>Hello <!--I'm a comment.--></div>
</template>
<script>
export default {
 comments: true
}
</script>

最后

美团点评金融团队曾分享过:

【第998期】JSON schema与表单验证

【第993期】总是一知半解的Event Loop

【第997期】4种使用webpack提升vue应用的方式

关于本文

译者:@ 张婧雅(公号:meituanfsp)

作者:@ANTHONY GORE

原文:https://vuejsdevelopers.com/2017/07/17/vue-js-2-4-important-features/

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存