译者：张婧雅，美团点评金融前端团队成员，目前是vue生态的重度用户，以后将继续研究深入vue最佳实践。
译者注：实践解决方案是简单的，但思考的过程才是值得我们探索的。
原文链接：4 Important Changes In Vue.js 2.4.0
本周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>向下传递propb
虽然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>最后，团队为了招聘方便，开通了公众号，主要是一些招聘信息，团队信息，所有的技术文章在公众号里也可以看到，对了，如果你想去美团其他团队，我们也可以帮你内推哦 ~
