집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js 2.5의 새로운 기능 공유

Vue.js 2.5의 새로운 기능 공유

小云云원래의: 2018-01-20 17:08:181451검색

이 글은 주로 Vue.js 2.5의 새로운 기능을 공유합니다. Vue 2.5 레벨 E는 현재 2.5 시리즈의 최신 버전을 기반으로 많은 개선과 버그 수정이 이루어졌습니다. 2.5.2 이 글은 모든 사람에게 vue 2.5의 새로운 기능을 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

TypeScript

TypeScript는 Microsoft에서 개발한 무료 오픈 소스 프로그래밍 언어입니다. 이는 JavaScript의 상위 집합이며 기본적으로 선택적 정적 타이핑 및 클래스 기반 객체 지향 프로그래밍을 언어에 추가합니다. 2012년 10월 Microsoft는 TypeScript의 첫 번째 공개 버전을 출시했습니다. 2013년 6월 19일 Microsoft는 TypeScript 0.9의 공식 버전을 출시했습니다. 지금까지 TypeScript는 버전 2.x

TypeScript 설치

로 개발되었습니다. TypeScript를 설치하려면:

npm(Node.js 패키지 관리자)을 통해 설치

TypeScript용 Visual Studio 플러그인 설치

참고: Visual Studio 2016 및 Visual Studio 2013 업데이트 2에는 기본적으로 TypeScript가 포함되어 있습니다. npm 설치 명령은 다음과 같습니다.

npm install -g typescript

Create a TypeScript 파일

편집기에서 Greetingr.ts 파일을 생성하고 다음 JavaScript 코드를 입력하세요.

function greeter(person) {
 return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

위 코드는 "hello"를 직접 출력합니다. 제인 사용자" .

코드 컴파일

명령줄에서 TypeScript 컴파일러를 실행하여 코드를 컴파일하세요.

tsc Greetinger.ts

TypeScript 웹 프로그램 실행

이제 Greetingr.html에 다음 코드를 입력하세요.

<!DOCTYPE html>
<html>
 <head><title>TypeScript Greeter</title></head>
 <body>
  <script src="greeter.js"></script>
 </body>
</html>

In the 브라우저 첫 번째 TypeScript 웹 애플리케이션 데모를 실행하려면 Greetingr.html을 엽니다!

Vue.js 2.5 새로운 기능

Vue 2.5 레벨 E가 출시되었습니다. 원본 2.x를 기반으로 많은 개선과 버그 수정이 이루어졌습니다. 현재 2.5 시리즈의 최신 버전은 2.5.2입니다. 독자가 Vue 2.5의 내용을 완전히 이해하고 싶다면 Vue 2.5 릴리스 노트를 보고 자세한 소개를 얻을 수 있습니다. 공식 소개와 온라인으로 수집된 정보를 바탕으로 이 2.5 버전은 주로 다음과 같은 개선 사항을 적용했습니다.

더 나은 TypeScript 통합
더 나은 오류 처리
단일 파일 구성 요소의 기능 구성 요소에 대한 더 나은 지원
환경 독립적인 서버 측 렌더링
독자들은 다음을 수행할 수 있습니다. 아래 링크를 통해 원본 소개를 확인하세요.

TypeScript 선언 개선

표준 사용을 위한 Vue 유형 선언 추가 개선(#6391) db138e2

오류 처리 및 보고

새로운 errorCaptured 후크 b3cd9bc로 오류 처리 개선 [자세히]

템플릿 표현식 오류 메시지 e38d006 개선, #6771

옵션 유형 검사 개선 b7105ae

기능 구성 요소

기능 구성 요소 지원을 위한 컴파일된 템플릿 ea0d227

기능 구성 요소에 대한 범위 CSS 지원 050 bb33

서버 측 렌더링

이제 renderToString은 콜백이 전달되지 않으면 Promise를 반환합니다.f881dd1, 종료 #6160

add shouldPrefetch 옵션(shouldPreload와 동일한 서명) 7bc899c, 종료 #5964

프로덕션에 있는 경우 초기 상태 삽입 스크립트 자동 제거(# 6763) 2d32b5d, 종료 # 6761

이제 vue-server-renderer/basic.jsc5d0fa0에 환경에 구애받지 않는 서버 렌더러 빌드를 제공합니다. 타입스크립트. 그 이후로 우리는 대부분의 핵심 라이브러리(vue, vue-routervuex)에 대한 공식 TypeScript 유형 선언을 포함했습니다. 그러나 즉시 사용 가능한 Vue API를 사용하는 경우 현재 통합이 부족합니다. 예: TypeScript는 Vue에서 사용하는 기본 객체 기반 API에서 이 유형을 쉽게 추론할 수 없습니다. Vue 코드가 TypeScript에서 더 잘 작동하도록 하려면 클래스 기반 구문을 사용하여 Vue 구성 요소를 작성할 수 있게 해주는 vue-class-comComponent 데코레이터를 사용해야 합니다.

클래스 기반 API를 좋아하는 사용자에게는 이것이 좋을 수도 있지만, 단지 유형 판단을 위해서는 다른 API를 사용해야 합니다. 이는 또한 기존 Vue 코드베이스를 TypeScript로 마이그레이션하는 것을 더 어렵게 만듭니다.

올해 초 TypeScript는 TypeScript가 객체 리터럴 기반 API를 더 잘 이해할 수 있도록 하는 몇 가지 새로운 기능을 도입했으며, 이를 통해 Vue의 유형 선언을 더 쉽게 개선할 수도 있습니다. TypeScript 팀의 Daniel Rosenwasser가 야심찬 PR 계획을 시작했습니다. TypeScript를 사용하면 다음과 같은 이점이 있습니다.

기본 Vue API를 사용할 때 이에 대한 올바른 유형 유추. 단일 파일 구성 요소에서도 작동합니다!

컴포넌트 소품을 기반으로 구성된 소품의 유형 추론.

또한 이러한 개선 사항은 기본 JavaScript 사용자에게도 도움이 될 것입니다! , VSCode를 사용하고 뛰어난 Vetur 확장 기능을 설치한 경우 Vue 구성 요소에서 기본 JavaScript를 사용할 때 매우 완전한 자동 완성 프롬프트와 심지어 입력 프롬프트도 표시됩니다! 이는 Vue 구성 요소를 분석하는 내부 패키지인 vue-언어-server가 TypeScript 컴파일러를 활용하여 코드에 대한 더 많은 정보를 추출할 수 있기 때문입니다. 또한 언어 서비스 프로토콜을 지원하는 모든 편집기는 vue-언어-서버를 사용하여 유사한 기능을 제공할 수 있습니다.

참고: 참고: TypeScript 사용자는 vue-router, vuex, vuex-router-sync 및 vue-class-comComponent 패키지를 유형 선언과 호환되도록 최신 버전으로 업데이트해야 합니다.

错误提示

在2.4及更早版本中，通常使用全局 config.errorHandleroption 来处理应用程序中的意外错误。当然，还可以使用renderError 组件选项来处理渲染函数中的错误。

而在新版本中，vue引入了errorCaptured 钩子，具有此钩子的组件捕获其子组件树（不包括其自身）中的所有错误（不包括在异步回调中调用的那些）。这和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 函数触发这个异常。

SFC 函数式组件

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

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

<template functional>
 <p>{{ props.msg }}</p>
</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(&#39;/path/to/vue.js&#39;);
$renderer_source = file_get_contents(&#39;/path/to/vue-server-renderer/basic.js&#39;);
$app_source = file_get_contents(&#39;/path/to/app.js&#39;);
$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: `<p>{{ msg }}</p>`,
 data: {
 msg: 'hello'
 }
})
// exposed by vue-server-renderer/basic.js
renderVueComponentToString(vm, (err, res) => {
 print(res)
})

Vue.js 这款渐进式的 JavaScript 框架自 2013 年发布至今，其简洁的语法设计、轻量快速的特点深受技术社区喜爱，在国内外都获得了非常广泛的应用及拓展，比如饿了么的开源组件库 Element UI 即是根据Vue 开发的，而阿里巴巴的 Weex 与 Vue 也多有合作，而美团点评的mpVue也是比较出色的一款框架。

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">
 <p>{{ props.msg }}</p>
 </template>
</comp>

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

<comp>
 <p slot-scope="props">
 {{ props.msg }}
 </p>
</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.js 2.5의 새로운 기능 공유

관련 기사