Vue v2.5 调整和更新不完全问题


Posted in Javascript onOctober 24, 2017

近日,Vue v2.5 发布,除了对 TypeScript 的更好的支持外,还有一些功能和语法的调整,你需要了解。本文,不谈 TypeScript,只对一些主要的调整进行说明。

本来,对 Vue 的版本升级不怎么敏感,所以没有太关注最近的 v2.5 的发布。今天,在重新下载 Vue 构建项目的时候,发现有好几个警告提示。

Vue v2.5 调整和更新不完全问题

看警告提示,知道是因为使用了 v2.5 的 Vue,scoped slot 的语法进行了调整,然后去 GitHub 上查看了 v2.5 的 release 才知道,v2.5 中已经不建议使用 scope 属性了,推荐使用 slot-scope 属性来设置上下文。

将代码中的 scope=”scope” 修改为 slot-scope=”scope”。如下图。

Vue v2.5 调整和更新不完全问题

进入正题,下面列一写 Vue v2.5 中的主要更新和调整。

使用 errorCaptured 钩子来处理组件内异常

在 v2.5 之前,可以用个全局的 config.errorHandler 设置来为应用提供一个处理未知异常的函数,也可以设置 renderError 组件来处理 render 函数内的异常。但是,这些都不能提供一个完整的机制来处理一个单独组件内的异常。

v2.5 中,组件内提供了一个新的钩子函数 errorCaptured,可以捕获该组件内所有子组件树中(不含自身)产生的所有的异常(包括异步调用中的异常),这个钩子函数接收的参数和 errorHandler 一样,可以让开发者更加友好地处理组件内异常。

如果你了解 React 的话,会发现这个特性和 React v16 中引进的“异常边界(Error Boundary)”的概念非常相似,都是为了更好的处理和展示单个组件在渲染的过程中异常。本公众号和知乎专栏之前的文章有专门介绍 React 的异常边界的概念,点击传送门进行查看。

要利用 errorCaputerd,可以封装一个通用组件,来包含其他的业务组件,来捕获业务组件内的异常,并做对应的展示处理。下面列一个官方给的简单示例,封装一个通用组件(ErrorBoundary)来包含和处理其他业务组件(another component)的异常。

Vue.component('ErrorBoundary', {
 data: () => ({ error: null }),
 errorCaptured (err, vm, info) { 
 this.error = `${err.stack}\n\nfound in ${info} of component`
 return false
 },
 render (h) { 
 if (this.error) { 
 return h('pre', { style: { color: 'red' }}, this.error)
 } 
 // ignoring edge cases for the sake of demonstration
 return this.$slots.default[0]
 }
})
<error-boundary>
 <another-component />
</error-boundary>

errorCaputed 的传递行为特性

  • 如果定义了全局的 errorHandler,所有的异常还是会传递给 errorHadnler,如果没有定义 errorHandler,这些异常仍然可以报告给一个单独的分析服务。
  • 如果一个组件上通过继承或父组件定义了多个 errorCapured 钩子函数,这些钩子函数都会收到同样的异常信息。
  • 可以在 errorCapured 钩子内 return false 来阻止异常传播,表示:该异常已经被处理,可忽略。而且,也会阻止其他的 errorCapured 钩子函数和全局的 errorHandler 函数触发这个异常。

单文件组件支持“函数式组件”

通过 vue-loader v13.3.0 或以上版本,支持在单文件组件内定义一个“函数式组件”,且支持模板编译、作用域 CSS 和 热部署等功能。

函数式组件的定义,需要在 template 标签上定义 functional 属性来声明。且模板内的表达式的执行上下文是 函数式声明上下文,所以要访问组件的属性,需要使用 props.xxx 来获取。简单例子见下:

<template functional>
 <div>{{ props.msg }}</div>
</template>

SSR 环境

使用 vue-server-renderer 来构建 SSR 应用时,默认是需要一个 Node.js 环境的,使得一些像 php-v8js 或 Nashorn 这样的 JavaScript 运行环境下无法运行。v2.5 中对此进行了完善,使得上述环境下都可以正常运行 SSR 应用。

在 php-v8js 和 Nashorn 中,在环境的准备阶段需要模拟 global 和 process 全局对象,并且需要单独设置 process 的环境变量。需要设置 process.env.VUE_ENV 为 “server”,设置 process.env.NODE_ENV 为 “development” 或 “production”。

另外,在 Nashorn 中,还需要用 Java 原生的 timers 为 Promise 和 settimeout 提供一个 polyfill。

官方给出了一个在 php-v8js 中的使用示例,如下:

<?php
$vue_source = file_get_contents('/path/to/vue.js');
$renderer_source = file_get_contents('/path/to/vue-server-renderer/basic.js');
$app_source = file_get_contents('/path/to/app.js');
$v8 = new V8Js();
$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
$v8->executeString($vue_source);
$v8->executeString($renderer_source);
$v8->executeString($app_source);
?>
// app.js
var vm = new Vue({
 template: `<div>{{ msg }}</div>`,
 data: {
 msg: 'hello'
 }
})
// exposed by vue-server-renderer/basic.js
renderVueComponentToString(vm, (err, res) => {
 print(res)
})

v-on 修饰符

键值 key 自动修饰符

在 Vue v2.5 之前的版本中,如果要在 v-on 中使用没有内置别名的键盘键值,要么直接使用 keyCode 当修饰符(@keyup.13=”foo”),要么需要使用 config.keyCodes 来为键值注册别名。

在 v2.5中,你可以直接使用合法的键值 key 值(参考MDN中的 KeyboardEvent.key)作为修饰符来串联使用它。如下:

<input @keyup.page-down="onPageDown">

上述例子中,事件处理函数只会在 $event.key === ‘PageDown' 时被调用。

注意:现有键值修饰符仍然可用。在IE9中,一些键值(.esc 和 方向键的 key)不是一致的值,如果要兼容 IE9,需要按 IE9 中内置的别名来处理。

.exact 修饰符

新增了一个 .exact 修饰符,该修饰符应该和其他系统修饰符(.ctrl, .alt, .shift and .meta)结合使用,可用用来区分一些强制多个修饰符结合按下才会触发事件处理函数。如下:

<!-- 当 Alt 或 Shift 被按下也会触发处理函数 -->
<button @click.ctrl="onClick">A</button>
<!-- 只有当 Ctrl 被按下,才会触发处理函数 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

简化 Scoped Slots 的使用

之前,如果要在 template 标签上使用 scope 属性定义一个 scoped slot,可以像下面这样定义:

<comp>
 <template scope="props">
 <div>{{ props.msg }}</div>
 </template>
</comp>

在 v2.5 中,scope 属性已被弃用(仍然可用,但是会爆出一个警告,就像本文文首的那样),我们使用 slot-scope 属性替代 scope 属性来表示一个 scoped slot,且 slot-scope 属性除了可以被用在 template 上,还可以用在标签元素和组件上。如下:

<comp>
 <div slot-scope="props">
 {{ props.msg }}
 </div>
</comp>

注意:这次的调整,表示 slot-scope 已经是一个保留属性了,不能再被单独用在组件属性上了。

Inject 新增了默认值选项

本次调整中,Injections 可以作为可选配置,并且可以声明默认值。也可以用 from 来表示原属性。

export default {
 inject: {
 foo: {
 from: 'bar',
 default: 'foo'
 }
 }
}

与属性类似,数组和对象的默认值需要使用一个工厂函数返回。

export default {
 inject: {
 foo: {
 from: 'bar',
 default: () => [1, 2, 3]
 }
 }
}

总结

以上所述是小编给大家介绍的Vue v2.5 调整和更新不完全问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 #Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 #Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 #Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 #Javascript
详解基于Vue+Koa的pm2配置
Oct 24 #Javascript
Vue.js2.0中的变化小结
Oct 24 #Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 #Javascript
You might like
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php实现图片缩放功能类
2013/12/18 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
js操作二级联动实现代码
2010/07/27 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python同时处理多个异常的方法
2020/07/28 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
骨干教师培训方案
2014/05/06 职场文书
大学生村官考核材料
2014/05/23 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL