vue-2.4.0-添加的新东东

组件内新增实现属性继承

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

事件总线模式或者vuex也能够解决跨非直接父子组件通讯的问题，但VUE2.4.0版本提供了一种新的解决方案。事实上，这个新功能是有两个独立却相关的部分组成，首先，组件支持的选项，其次需用到实例属性。咱们经过一个例子来看它是如何工做的。<parent-component :passdown="passdown"> <child-component :passdown="passdown"> <grand-child-component :passdown="passdown"> Finally, here's where we use {{ passdown }}!
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>

 

保留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>

异步组件支持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模块默认导出，容许之前更简洁的语法。

服务端渲染异步组件

在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程序代码分离。