组件内新增实现属性继承

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

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

事件总线模式或者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>

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





vue-2.4.0-添加的新东东的更多相关文章

  1. Android4.0 添加一个新的Android 键值

    这里添加新的键值,不是毫无凭据凭空创造的一个键值,而是根据kernel中检测到的按键值,然后转化为Android所需要的数值: 以添加一个Linux键值为217,把它映射为android的键值Brow ...

  2. MySQL 8.0有什么新功能

    https://mysqlserverteam.com/whats-new-in-mysql-8-0-generally-available/ 我们自豪地宣布MySQL 8.0的一般可用性. 现在下载 ...

  3. ML.NET 发布0.11版本:.NET中的机器学习,为TensorFlow和ONNX添加了新功能

    微软发布了其最新版本的机器学习框架:ML.NET 0.11带来了新功能和突破性变化. 新版本的机器学习开源框架为TensorFlow和ONNX添加了新功能,但也包括一些重大变化, 这也是发布RC版本之 ...

  4. Vue初识:一个前端萌新的总结

    一.前言 时隔三年,记得第一次写博客还是2015年了,经过这几年的洗礼,我也从一个后端的小萌新变成现在略懂一点点知识的文青.如今对于前端的东东也算有一知半解,个人能力总的来说,也能够独立开发产品级项目 ...

  5. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  6. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  7. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  8. vue.js 2.0开发

    创建一个工程文件: css中引用的是bootstrap的css,js中就是vue,index页面: <!DOCTYPE html> <html> <head> &l ...

  9. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  10. Ogre2.0 全新功能打造新3D引擎

    不知当初是在那看到,说是Ogre2.0浪费了一个版本号,当时也没多想,以为没多大更新,一直到现在想做一个编辑器时,忽然想到要看下最新版本的更新,不看不知道,一看吓一跳,所以说,网络上的话少信,你不认识 ...

随机推荐

  1. 【微框架】之一:从零开始,轻松搞定SpringCloud微服务系列--开山篇(spring boot 小demo)

    Spring顶级框架有众多,那么接下的篇幅,我将重点讲解SpringCloud微框架的实现 Spring 顶级项目,包含众多,我们重点学习一下,SpringCloud项目以及SpringBoot项目 ...

  2. P3240 [HNOI2015]实验比较 树形DP

    \(\color{#0066ff}{ 题目描述 }\) 小D 被邀请到实验室,做一个跟图片质量评价相关的主观实验.实验用到的图片集一共有 \(N\) 张图片,编号为 \(1\) 到\(N\).实验分若 ...

  3. luogu1900 自我数

    分享一个非正解的做法 本题解内存最低(\(\le1\rm MiB\)) 但是不开O2会tle 思路:每个数字仅会更新出1个新的数字,而且这个新数字比旧数字最多也就大70多.所以这里还是利用" ...

  4. java spi机制和场景

    JDK中查找服务的实现的工具类是:java.util.ServiceLoader, jvm启动时自动查找META-INF/services/下面的实现类,并初始化实例 jdbc的mysql实现类 在静 ...

  5. Python IDLE快捷键汇总

    Python IDLE快捷键汇总 在Options→configure IDLE→keys,查看现存的快捷键,也可以配置选择快捷 编辑状态时: Ctrl+Shift+space(默认与输入法冲突,修改 ...

  6. 电脑c盘爆满检查与设置

    C盘文件爆满,先检查是那个文件造成的 操作方法:打开文件夹选项,将“隐藏受保护的操作系统文件(推荐)”前的勾选去掉,然后打开系统盘查看是那个文件占用空间大 Hiberfil.sys文件删除方法: 1. ...

  7. thinkPHP5.0验证器自定义验证规则

    自定义验证规则 protected $rule = [ 'views' => 'require|number|checkviews:0',//checkviews为自定义验证规则,0是传过去的规 ...

  8. 转 Alert.log shows No Standby Redo Logfiles Of Size 153600 Blocks Available

    http://blog.itpub.net/23135684/viewspace-703620/ Alert.log shows No Standby Redo Logfiles Of Size 15 ...

  9. pip install keras==1.2.1

    [该方法仅适用于压缩包中含有setup.py的情况] 先从GitHub上找到想要下载的历史版本,右键复制链接地址. 然后执行命令: pip install https://github.com/ker ...

  10. SQL智能提示插件——SQLPrompt

    1.安装SQLPrompt,直接点击下一步即可,然后打开SQL Server 在菜单栏找到SQLPrompt选项注册该软件 2.先断开网络,然后运行注册机,将注册吗复制到序列号的地方,将两个勾选的复选 ...