From 25246270a2a7449f00c335b916ec61c5e715c81d Mon Sep 17 00:00:00 2001 From: daisuke Date: Mon, 19 Oct 2020 15:43:18 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E5=89=8D=E3=81=AEarray-r?= =?UTF-8?q?efs.md=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 以下ファイルを追加 https://github.com/vuejs/docs-next/blob/master/src/guide/migration/array-refs.md --- src/.vuepress/config.js | 1 + src/guide/migration/array-refs.md | 69 +++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/guide/migration/array-refs.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index aff8c464..b3d7bd77 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -111,6 +111,7 @@ const sidebar = { collapsable: true, children: [ 'migration/introduction', + 'migration/array-refs', 'migration/async-components', 'migration/attribute-coercion', 'migration/custom-directives', diff --git a/src/guide/migration/array-refs.md b/src/guide/migration/array-refs.md new file mode 100644 index 00000000..f912fe26 --- /dev/null +++ b/src/guide/migration/array-refs.md @@ -0,0 +1,69 @@ +--- +title: v-for Array Refs +badges: +- breaking +--- + +# {{ $frontmatter.title }} + +In Vue 2, using the `ref` attribute inside `v-for` will populate the corresponding `$refs` property with an array of refs. This behavior becomes ambiguous and inefficient when there are nested `v-for`s present. + +In Vue 3, such usage will no longer automatically create an array in `$refs`. To retrieve multiple refs from a single binding, bind `ref` to a function which provides more flexibility (this is a new feature): + +```html +
+``` + +With Options API: + +```js +export default { + data() { + return { + itemRefs: [] + } + }, + methods: { + setItemRef(el) { + this.itemRefs.push(el) + } + }, + beforeUpdate() { + this.itemRefs = [] + }, + updated() { + console.log(this.itemRefs) + } +} +``` + +With Composition API: + +```js +import { ref, onBeforeUpdate, onUpdated } from 'vue' + +export default { + setup() { + let itemRefs = [] + const setItemRef = el => { + itemRefs.push(el) + } + onBeforeUpdate(() => { + itemRefs = [] + }) + onUpdated(() => { + console.log(itemRefs) + }) + return { + itemRefs, + setItemRef + } + } +} +``` + +Note that: + +- `itemRefs` doesn't have to be an array: it can also be an object where the refs are set by their iteration keys. + +- This also allows `itemRefs` to be made reactive and watched, if needed. \ No newline at end of file From d1489eb58718d92c32d7556ca847c411006c3fc8 Mon Sep 17 00:00:00 2001 From: daisuke Date: Thu, 22 Oct 2020 09:46:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Migration=20Guide=20>=20v-for=20Array=20Ref?= =?UTF-8?q?s=20=E3=81=AE=E7=BF=BB=E8=A8=B3=20#107?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/migration/array-refs.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/guide/migration/array-refs.md b/src/guide/migration/array-refs.md index f912fe26..c97fa7d0 100644 --- a/src/guide/migration/array-refs.md +++ b/src/guide/migration/array-refs.md @@ -1,20 +1,20 @@ --- -title: v-for Array Refs +title: v-forのref配列 badges: - breaking --- # {{ $frontmatter.title }} -In Vue 2, using the `ref` attribute inside `v-for` will populate the corresponding `$refs` property with an array of refs. This behavior becomes ambiguous and inefficient when there are nested `v-for`s present. +Vue 2 では、`v-for` の中で `ref` 属性を記述すると、対応する `$refs` プロパティに参照の配列を入れます。この動作は、入れ子になった `v-for` がある場合、曖昧で非効率的になります。 -In Vue 3, such usage will no longer automatically create an array in `$refs`. To retrieve multiple refs from a single binding, bind `ref` to a function which provides more flexibility (this is a new feature): +Vue 3 では、この記述では `$refs` に配列が作成されなくなりました。１つのバインディングから複数の参照を取得するには、関数に `ref` をバインドします (これは新機能です)。 ```html
``` -With Options API: +オプション API を使う場合 ```js export default { @@ -37,7 +37,7 @@ export default { } ``` -With Composition API: +コンポジション API を使う場合 ```js import { ref, onBeforeUpdate, onUpdated } from 'vue' @@ -62,8 +62,8 @@ export default { } ``` -Note that: +注意点 -- `itemRefs` doesn't have to be an array: it can also be an object where the refs are set by their iteration keys. +- `itemRefs` は配列である必要はありません。 反復キーで参照できるオブジェクトでも構いません。 -- This also allows `itemRefs` to be made reactive and watched, if needed. \ No newline at end of file +- これにより、必要に応じて `itemRefs` をリアクティブにして監視することもできます。 \ No newline at end of file