Merge pull request #508 from naokie/summary-update-aug-2nd

Author: naokie

src/.vuepress/public/images/sponsors/autocode.svg

@@ -7,10 +7,10 @@ export default {
   ],
   "special_sponsors": [
     {
-      "url": "https://autocode.com",
-      "img": "autocode.svg",
-      "name": "Autocode",
-      "description": "Build app-to-app workflows and connect APIs"
+      "url": "https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci=",
+      "img": "hbuilder.png",
+      "name": "HBuilder",
+      "description": "An IDE for Vue"
     }
   ],
   "platinum_sponsors": [

src/.vuepress/public/images/sponsors/hbuilder.png

@@ -16,7 +16,7 @@ count.value++
 console.log(count.value) // 1
 ```
 
-If an object is assigned as a ref's value, the object is made deeply reactive by the [reactive](./basic-reactivity.html#reactive) method.
+If an object is assigned as a ref's value, the object is made deeply reactive by the [reactive](./basic-reactivity.html#reactive) function.
 
 **Typing:**
 

src/.vuepress/theme/data/patreon-sponsors.js

@@ -89,7 +89,7 @@ Think of `MyComponent` as being referenced as a variable. If you have used JSX,
 
 ### Dynamic Components
 
-Since components are referenced as variables instead of registered under string keys, we should use dynamic `:is` binding when using dynamic components inside `<script setup>`:
+Since components are referenced as variables instead of registered under string keys, you should use dynamic `:is` binding when using dynamic components inside `<script setup>`:
 
 ```vue
 <script setup>
@@ -133,7 +133,7 @@ import * as Form from './form-components'
 
 ## `defineProps` and `defineEmits`
 
-To declare options like `props` and `emits` with full type inference support, we can use the `defineProps` and `defineEmits` APIs, which are automatically available inside `<script setup>`:
+To declare `props` and `emits` in `<script setup>`, you must use the `defineProps` and `defineEmits` APIs, which provide full type inference support and are automatically available inside `<script setup>`:
 
 ```vue
 <script setup>
@@ -148,7 +148,7 @@ const emit = defineEmits(['change', 'delete'])
 
 - `defineProps` and `defineEmits` are **compiler macros** only usable inside `<script setup>`. They do not need to be imported, and are compiled away when `<script setup>` is processed.
 
-- `defineProps` accepts the same value as the `props` option, while `defineEmits` accepts the same value as the `emits` option.
+- `defineProps` accepts the same value as the [`props` option](/api/options-data.html#props), while `defineEmits` accepts the same value as the [`emits` option](/api/options-data.html#emits).
 
 - `defineProps` and `defineEmits` provide proper type inference based on the options passed.
 
@@ -195,7 +195,7 @@ const attrs = useAttrs()
 
 ## Usage alongside normal `<script>`
 
-`<script setup>` can be used alongside normal `<script>`. A normal `<script>` may be needed in cases where we need to:
+`<script setup>` can be used alongside normal `<script>`. A normal `<script>` may be needed in cases where you need to:
 
 - Declare options that cannot be expressed in `<script setup>`, for example `inheritAttrs` or custom options enabled via plugins.
 - Declaring named exports.

src/api/refs-api.md

@@ -126,7 +126,7 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul
 
 The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
 
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
+Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
 
 ### Custom Inject Name
 

src/api/sfc-script-setup.md

@@ -27,7 +27,7 @@ app.component('my-component-name', {
 
 ### 命名のケース (Name Casing)
 
-コンポーネントを文字列テンプレートか単一ファイルコンポーネントで定義する際は、コンポーネント名に 2 つの命名規則があります:
+コンポーネントを文字列テンプレートか単一ファイルコンポーネントで定義する際は、名前の付け方に 2 つのオプションがあります:
 
 #### ケバブケース
 

src/api/sfc-style.md

@@ -97,7 +97,12 @@ vue upgrade --next
 npm の場合:
 
 ```bash
-$ npm init vite <プロジェクト名> -- --template vue
+# npm 6.x
+$ npm init vite@latest <プロジェクト名> --template vue
+
+# npm 7+, extra double-dash is needed:
+$ npm init vite@latest <プロジェクト名> -- --template vue
+
 $ cd <プロジェクト名>
 $ npm install
 $ npm run dev

src/guide/component-registration.md

@@ -85,7 +85,7 @@ badges:
 | `draggable`          | `draggable` → `false`           |
 | `spellcheck`         | `spellcheck` → `true`           |
 
-これまでの振る舞いを維持するために、また、`false` を `'false'` に強制するために、3.x Vue の開発者は `contenteditable` と `spellcheck` に対して `v-bind` 式を `false` または `'false'` に解決する必要があります。
+3.x では「列挙されたプロパティ」のために `null` を `'false'` に強制しなくなったため、`contenteditable` や `spellcheck` のような場合、2.x と同じ振る舞いを維持するために、開発者は `null` に解決していた `v-bind` 式を `false` に解決するか、`'false'` に変更する必要があります。
 
 2.x では、列挙された属性に対して無効な値を `'true'` に強制的に設定していました。これは通常意図していなかったもので、大規模に利用される可能性は低いと思われます。3.x では、`true` または `'true'` を明示的に指定する必要があります。
 
@@ -107,7 +107,7 @@ badges:
   <tbody>
     <tr>
       <td rowspan="3">2.x “列挙された属性”<br><small>つまり<code>contenteditable</code>、<code>draggable</code>、<code>spellcheck</code></small></td>
-      <td><code>undefined</code>, <code>false</code></td>
+      <td><code>undefined</code></td>
       <td><code>undefined</code>, <code>null</code></td>
       <td><i>削除されます</i></td>
     </tr>
@@ -120,7 +120,7 @@ badges:
       <td><code>"true"</code></td>
     </tr>
     <tr>
-      <td><code>null</code>, <code>'false'</code></td>
+      <td><code>null</code>, <code>false</code>, <code>'false'</code></td>
       <td><code>false</code>, <code>'false'</code></td>
       <td><code>"false"</code></td>
     </tr>

src/guide/installation.md

@@ -15,8 +15,8 @@ badges:
 
 Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。
 
-- **bind** - ディレクティブが要素にバインドされると発生します。これは一度だけ発生します。
-- **inserted** - 要素が親 DOM に挿入された後に発生します。
+- **bind** - ディレクティブが要素にバインドされると呼び出されます。これは一度だけ呼び出されます。
+- **inserted** - 要素が親 DOM に挿入された後に呼び出されます。
 - **update** - 要素が更新されたときに呼び出されますが、子はまだ更新されていません。
 - **componentUpdated** - コンポーネントと子が更新されると呼び出されます。
 - **unbind** - ディレクティブが削除されると呼び出されます。 また、これは一度だけ呼び出されます。
@@ -45,7 +45,7 @@ Vue.directive('highlight', {
 - bind → **beforeMount**
 - inserted → **mounted**
 - **beforeUpdate**: 追加されました！これは、コンポーネントのライフサイクルフックのように、要素自体が更新される前に呼び出されます。
-- update → 削除されました！updated と似たようなものが多すぎて冗長です。代わりに updated を使ってください。
+- update → 削除されました！ `updated` と似たようなものが多すぎて冗長です。代わりに `updated` を使ってください。
 - componentUpdated → **updated**
 - **beforeUnmount**: 追加されました！コンポーネントのライフサイクルフックと同様に、要素がマウント解除される直前に呼び出されます。
 - unbind -> **unmounted**

src/guide/migration/attribute-coercion.md

@@ -8,7 +8,7 @@ badges:
 ## 概要
 
 - **破壊的変更:** タグをカスタム要素として扱うかのチェックは、テンプレートのコンパイル中に実行されるようになりました。そのためランタイム設定ではなくコンパイラオプションで設定する必要があります。
-- **破壊的変更:** 特別な `is` プロパティの使用は予約済みの `<component>` タグのみに制限されます。
+- **破壊的変更:** 特別な `is` 属性の使用は予約済みの `<component>` タグのみに制限されます。
 - **新規:** ネイティブ HTML のパース制限を回避するためにネイティブ要素で `is` が使用されていた 2.x のユースケースをサポートするため、値の前に `vue:` を付けて、Vue コンポーネントとして解決します。
 
 ##  自主的なカスタム要素
@@ -69,21 +69,21 @@ Vue.config.ignoredElements = ['plastic-button']
 <button is="plastic-button">Click Me!</button>
 ```
 
-Vue では、ブラウザで普遍的に利用できるようになる前のネイティブ属性の動作をシミュレートするために、特別なプロパティ `is` を使用していました。しかし、2.x では、`plastic-button` という名前の Vue コンポーネントをレンダリングしていると解釈されていました。これにより、上記のカスタマイズされたビルトイン要素のネイティブな使用がブロックされます。
+Vue では、ブラウザで普遍的に利用できるようになる前のネイティブ属性の動作をシミュレートするために、特別な属性 `is` を使用していました。しかし、2.x では、`plastic-button` という名前の Vue コンポーネントをレンダリングしていると解釈されていました。これにより、上記のカスタマイズされたビルトイン要素のネイティブな使用がブロックされます。
 
-3.0 では、Vue の `is` プロパティの特別な扱いを `<component>` タグのみに制限しています。
+3.0 では、Vue の `is` 属性の特別な扱いを `<component>` タグのみに制限しています。
 
 - 予約済みの `<component>` タグで使用された場合、2.x と全く同じ動作をします。
-- 通常のコンポーネントに使用すると、通常のプロパティのように動作します。
+- 通常のコンポーネントに使用すると、通常の属性のように動作します。
 
   ```html
   <foo is="bar" />
   ```
 
 - 2.x の動作: `bar` コンポーネントをレンダリングします。
-- 3.x の動作: `foo` コンポーネントをレンダリングし、`is` プロパティを渡します。
+- 3.x の動作: `foo` コンポーネントをレンダリングし、`is` 属性を渡します。
 
-- 通常の要素で使用される場合、`is` プロパティとして `createElement` の呼び出しに渡され、ネイティブ属性としてもレンダリングされます。これはカスタマイズされたビルトイン要素の使用をサポートします。
+- 通常の要素で使用される場合、`is` 属性として `createElement` の呼び出しに渡され、ネイティブ属性としてもレンダリングされます。これはカスタマイズされたビルトイン要素の使用をサポートします。
 
   ```html
   <button is="plastic-button">Click Me!</button>
@@ -105,7 +105,7 @@ Vue では、ブラウザで普遍的に利用できるようになる前のネ
 
 ### 2.x での構文
 
-Vue 2 では、ネイティブタグに `is` プロパティを使用してこれらの制限を回避することを推奨しています。
+Vue 2 では、ネイティブタグに `is` 属性を使用してこれらの制限を回避することを推奨しています。
 
 ```html
 <table>