Skip to content

Summary of changes for the 1st week of August #464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 8, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/.vuepress/theme/components/Newsletter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
box-sizing: border-box;
border: 1px solid currentColor;
appearance: none;
cursor: pointer;
}
}
</style>
2 changes: 1 addition & 1 deletion src/api/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
// ファクトリ関数
loader: () => import('./Foo.vue')
loader: () => import('./Foo.vue'),
// 非同期コンポーネントが読み込み中に使うコンポーネント
loadingComponent: LoadingComponent,
// 読み込みが失敗したときに使うコンポーネント
Expand Down
17 changes: 12 additions & 5 deletions src/api/options-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,15 @@

ミックスインフックは提供された順番に呼び出され、コンポーネント自身のフックよりも前に呼び出されます。

:::info
Vue 2 では、コンポーネントロジックの再利用可能なチャンクを作成するための主要なメカニズムがミックスインでした。Vue 3 では、引き続きミックスインがサポートされていますが、コンポーネント間でコードの再利用するには [Composition API](/guide/composition-api-introduction.html) が推奨されています。
:::

- **例:**

```js
const mixin = {
created: function() {
created() {
console.log(1)
}
}
Expand All @@ -34,20 +38,23 @@

## extends

- **型:** `Object | Function`
- **型:** `Object`

- **詳細:**

別のコンポーネントを宣言的に拡張できます(純粋なオプションオブジェクトまたはコンストラクタのどちらでも)。これは主に単一ファイルコンポーネント間の拡張を簡単にすることを目的としています。
あるコンポーネントを別のコンポーネントに拡張して、そのコンポーネントオプションを継承することができます。

実装の観点からは、`extends` は `mixins` とほとんど同じです。`extends` で指定されたコンポーネントは、最初のミックスインであるかのように扱われます。

しかし、`extends` と `mixins` は異なる意図を表現します。`mixins` オプションは主に機能のチャンクを構成するために使われ、`extends` は主に継承に関係しています。

これは `mixins` に似ています
`mixins` と同様に、どのオプションも関連するマージ戦略を使ってマージされます

- **例:**

```js
const CompA = { ... }

// CompA を `Vue.extend` の呼び出しなしで拡張します
const CompB = {
extends: CompA,
...
Expand Down
2 changes: 2 additions & 0 deletions src/guide/migration/custom-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ badges:

コンポーネントのライフサイクルに合わせて、ディレクティブのフック関数の名称が変更されました。

加えて、`expression` 文字列は `binding` オブジェクトの一部として渡されなくなりました。

## 2.x での構文

Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。
Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
- [Emits Component Option](/guide/component-custom-events.html)
- カスタムレンダラを作るための [`@vue/runtime-core` の `createRenderer` API](https://github.com/vuejs/vue-next/tree/master/packages/runtime-core)
- [SFC での Composition API の Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) <Badge text="experimental" type="warning" />
- [SFC でのステートドリブンな CSS Variables (`<style>` の `v-bind`)](https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md) <Badge text="experimental" type="warning" />
- [SFC でのステートドリブンな CSS Variables (`<style>` の `v-bind`)](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md) <Badge text="experimental" type="warning" />
- [SFC での `<style scoped>` は、グローバルルールまたはスロットされたコンテンツのみを対象とするルールを含めることができるようになった](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
- [Suspense](/guide/migration/suspense.html) <Badge text="experimental" type="warning" />

Expand Down Expand Up @@ -100,7 +100,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
- `destroyed` ライフサイクルオプションの名前が `unmounted` に変更されました
- `beforeDestroy` ライフサイクルオプションの名前が `beforeUnmount` に変更されました
- [Props の `default` ファクトリ関数は `this` コンテキストにアクセスできなくなりました](/guide/migration/props-default-this.html)
- [コンポーネントライフサイクルに合わせてカスタムディレクティブ API が変更されました](/guide/migration/custom-directives.html)
- [コンポーネントライフサイクルに合わせてカスタムディレクティブ API が変更され、`binding.expression` が削除されました](/guide/migration/custom-directives.html)
- [`data` オプションは常に関数として宣言されることが必要になりました](/guide/migration/data-option.html)
- [ミックスインの `data` オプションは浅くマージされるようになりました](/guide/migration/data-option.html#mixin-merge-behavior-change)
- [属性強制の戦略が変更されました](/guide/migration/attribute-coercion.html)
Expand Down
2 changes: 1 addition & 1 deletion src/guide/single-file-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ touch rollup.config.js

```js
// サードパーティのプラグインをインポート
import commonjs from 'rollup-plugin-commonjs'
import commonjs from '@rollup/plugin-commonjs'
import VuePlugin from 'rollup-plugin-vue'
import pkg from './package.json' // 名前を再利用するために package.json ファイルをインポート

Expand Down