最近一週間で起こったVueの注目すべき出来事や記事などををまとめます。
SFC Improvements by Evan You !
Evan You@youyuxi
RFCs for improving the authoring experience of Vue Single File Components: github.com/vuejs/rfcs/pul…20:07 PM - 29 Jun 2020
105
485
Evan氏によって、SingleFileComponentの記述方法に関するRFCが3つ、Github上で公開されました。
PR上で活発な議論がされています。
1. <component> Import Sugar
https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-component-sugar.md
componentをimportする新しい糖衣構文を提案したRFCです。
これまでのexport default { components: { ... } }で発生していた、何度も同じcomponent名を書かなければならなかった問題の解決がモチベーションのようです。
<component src="./Foo.vue"/>
<component async src="./Bar.vue"/>
<component src="./Baz.vue" as="Qux" />
<template>
<Foo/>
<Bar/>
<Qux/>
</template>
2.<script setup> for Composition API in SFCs
https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md
composition APIのsetupをより簡潔に記述する記法を提案したRFCです。
現在composition APIを使うためにはsetup関数の仕様が必須ですが、この関数は不要なボイラープレートを生み出していました。
この不要なコードをなくすアプローチが提案されています。
<template>
<button @click="inc">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
export const count = ref(0)
export const inc = () => count.value++
</script>
確かに現状の記述よりかなりコードが少なくなっています！
これは革新的。今後の展開が楽しみです。
ちなみに、僕はこのRFCを見た時にSvelteを思い出しました。
Evan氏のtwitterを見ると、確かにSvelteに影響を受けたようです。
Evan You@youyuxi@_yskere Obviously inspired by Svelte, but the semantics is quite different23:06 PM - 03 Jul 2020
3. State-driven CSS Variable Injection in <style>
https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md
SFCのstyleタグで動的な変数を扱えるようにする提案です。
これまでのVueではランタイム上でcomponentの状態によって、スタイルを動的に変更することができなかったので、その解決を目的としています。
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style :vars="{ color }">
.text {
color: var(--color);
}
</style>
Vue 3 Status Updated
Vue3のリリース時期についてアナウンスがありました。
Vue 3: mid 2020 status update
#183
Vue 3: Mid 2020 Status Update
Many of our users have been asking this question: when will Vue 3 be ready? We have refrained from giving a definitive answer because predicting software delivery time is hardly ever accurate. As a non-profit-driven project, we wanted to focus on writing good software instead of hitting deadlines. However, it's been a long wait, and we know the uncertainty can make it difficult to make plans with Vue 3. So here we would like to provide some general guidance and detailed status updates to help our users adjust their expectations and plans accordingly.
The majority of the time spent on Vue 3 has been invested into designing and building a solid core, which brings about many exciting improvments (you can read more about it here). However, in order to mark the whole framework "ready", it's not just about the core. We also need to have compatible versions of the supporting libraries (Vue Router, Vuex, test utils), tools (CLI, eslint plugin, browser devtool extensions, IDE extensions), and documentation (both for new users and migration). While we have been working hard on all of these parts, it is very difficult to accurately predict a timeline given the amount of effort and coordination it takes to have all the pieces fit together. We originally hoped to have Vue 3 released in the first half of 2020, but we have to adjust it given the current progress. Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0.
Decision Tree
It doesn't mean you cannot start using Vue 3 today though. Most of the framework parts are now in either beta or alpha, and the core itself has been extensively tested by our early adopters. The only thing that blocks us from going into RC is the browser devtools extension (which is being actively worked on at this moment). All the significant changes have been landed and documented in RFCs and there are no more planned breaking changes. If you've been waiting to get onboard with Vue 3, here is a decision tree to help you plan accordingly:
IWantVue3()
async function IWantVue3() {
await read(`https://github.com/vuejs/rfcs/pulls?q=is%3Apr+is%3Amerged+label%3Acore+-label%3Arevoked+-label%3A2.6+sort%3Acomments-desc`)
if (isTrue("I just want to play with Vue 3"))) {
// If you just want to try Vue 3 out - you can do it right now with Vite.
// Vite (https://github.com/vitejs/vite) is a new dev/build tool that we
// created that is lighter, faster and produces smaller bundles. It works
// with Vue 3 out of the box.
run(`npm init vite-app hello-vue3`)
return
}
if (isTrue("I am planning to use Vue 3 for a new project")) {
if (isTrue("I need IE11 support")) {
await IE11CompatBuild() // July 2020
}
if (isTrue("RFCs are too dense, I need an easy-to-read guide")) {
await migrationGuide() // July 2020
}
if (isTrue("I'd rather wait until it's really ready") {
await finalRelease() // Targeting early August 2020
})
run(`npm init vite-app hello-vue3`)
return
}
if (isTrue("I am planning to upgrade an existing Vue 2 project")) {
await IE11CompatBuild()
await migrationGuide()
await ecosystem(
// this is the tricky part: if you have an existing, non-trivial Vue 2
// app, you likely are using some dependencies that are not yet
// Vue-3-compatible, for example meta frameworks like Nuxt, or UI
// component libraries like Vuetify. If that's the case, our suggestion
// is don't be in a hurry to upgrade. It *will* take some time for the
// ecosystem to catch up.
// Also note that you can start using Vue Composition API in Vue 2 today
// via https://github.com/vuejs/composition-api - we are also going to be
// backporting compatible Vue 3 features to 2.x once 3.0 is out.
)
return
}
if (isTrue("I am the author of a Vue ecosystem library")) {
// It's time to make your lib Vue 3 compatible!
return
}
}
Status of Major Framework Parts
Vue 3 Core
Vue 3 core has been in beta for over two months now. We have merged all planned breaking change RFCs, and there are no further breaking changes planned before official 3.0 release.
Thousands of early adopters have been using it for new projects and have helped us identify and fix many bugs and behavior inconsistencies with Vue 2. At this stage, we believe Vue 3 core is quite stable and ready for RC.
Vue Router
We still have a few minor router hook behavior consistency issues with vue-router@3.x, but these are the only things that is blocking the router from being marked as Beta. The router is usable for new, non-critical projects.
Vuex
The only difference between Vuex 4.0 and 3.x is that it's Vue 3 compatible! It is ready to enter RC together with Vue 3 core.
Vue CLI
Vue 3 support in Vue CLI is currently provided via the vue-cli-plugin-vue-next plugin. You can scaffold a new project and then run vue add vue-next to switch to Vue 3. Vue 3 will become a option in the project creation process when it reaches RC.
Note if you are not particularly attached to webpack and IE11 support, you can also start a Vue 3 project with Vite.
JSX Support
There are currently two JSX transform implementations for Vue 3 with slightly differing syntax (for Vue specific features):
We are using this thread to unify the design and land on an official specification of how Vue features should be handled in JSX. If you use Vue with JSX, please provide your feedback in that thread.
Other Projects
周辺ライブラリや開発者ツール、ドキュメントの更新もしているので正確な予測は難しいとしながらも、
2020年8月をリリース目標としています。
同時に、今Vue3を使うべきかを判断するためのDecision Treeも書かれています。
これをみてVue3に手をだすのもいいでしょう。
🖊️ POSTS
Create a Blog with Nuxt Content
https://ja.nuxtjs.org/blog/creating-blog-with-nuxt-content/
先月リリースされてから話題を呼んでいる、Nuxt Contentを用いてブログを作るためのチュートリアル記事が、Nuxtの公式ブログで公開されました。
今週リリースされたNuxtContentv1.4.0の新機能、
「Live editing」についても触れられています。
🥁 Event
Vue.js Amsterdam 2020
https://www.vuejs.amsterdam/
8月14,15日に開催されるオンラインカンファレンス、Vue.js Amsterdam 2020のチケット販売が開始されました。
参加したい方は要チェックです。
🎉 Releases
Vue Demi
https://github.com/antfu/vue-demi
Vue2.x,v3.xの両方に対応するライブラリを作成するための開発者ツールが公開されました！
Anthony Fu@antfu7Made a new tool - Vue Demi 🎩
A utility allows you to write Universal Libraries for Vue 2 and 3!
github.com/antfu/vue-demi17:02 PM - 01 Jul 2020
Evan氏もリツイートしており、注目度の高いツールと言えそうです。
Vue Router v4.0.0-beta.1
https://github.com/vuejs/vue-router-next/blob/master/CHANGELOG.md
Vue3に対応したVueRouterのbeta版が公開されました。
2020年2月にalpha版の公開から約5ヶ月たってのbeta版アップデートです！🎉
Nuxt v2.13.3
https://github.com/nuxt/nuxt.js/releases/tag/v2.13.3
今回はバグfixがメイン。
新機能の追加はありません。
Top comments (0)