シリーズ記事ディレクトリ
記事ディレクトリ
1. 3 つの連続した質問 (なぜ)
1. なぜ ref を使用する必要があるのですか?
- 戻り値の型、応答性が失われます
- たとえば、セットアップ関数、計算関数、合成関数では、値の型を返すことができます
- Vue が ref を定義していない場合、ユーザーは独自の ref を作成するため、混乱を招きます。
WhyRef.vue コンポーネント
- 値型はどこにでもある
- vue3 はプロキシ経由で応答しますが、参照型 (配列、オブジェクト) に対してのみ有効です
- 値型もレスポンシブにするために、refが表示されます
<template>
<p>why ref demo {
{
state.age }} - {
{
age1 }}</p>
</template>
<script>
import {
toRefs, reactive, computed } from "vue";
function useFeatureX() {
const state = reactive({
x: 1,
y: 2,
});
return toRefs(state);
}
export default {
name: "whyRef",
setup() {
const {
x, y } = useFeatureX();
const state = reactive({
age: 20,
name: "杂货铺",
});
const age1 = computed(() => {
return state.age + 1;
});
setTimeout(() => {
console.log(x.value, y.value);
state.age = 25;
}, 1000);
return {
state,
age1,
};
},
};
</script>
2. なぜ .value が必要なのですか?
- ref はオブジェクトです (応答性を失うことはありません)。value には値が格納されます。
.valueプロパティの取得と設定によるリアクティブ- テンプレートで使用する場合は不要、リアクティブ、
.valueその他の場合は必須
3. なぜ toRef と toRefs が必要なのですか?
- 当初の意図: 応答性を失うことなくオブジェクト データを分散/拡張 (分解) する
- 前提: リアクティブ オブジェクト (リアクティブ カプセル化) 非通常オブジェクトの場合
- 注:レスポンシブを作成せず、レスポンシブを継続する
2. Vue3 で強化された重要な機能
1、createApp
vue2.x vs vue3.0
// vue2.x
const app = new Vue({
...})
// vue3
const app = Vue.createApp({
...})
vue2.x の使用と vue3.0 の比較
// vue2.x
Vue.use(...)
Vue.mixin(...)
Vue.component(...)
Vue.directive(...)
// vue3
app.use(...)
app.mixin(...)
app.component(...)
app.directive(...)
2. エミット属性
App.vue 親コンポーネント
- 親コンポーネントの子コンポーネント ラベルは onSayHello カスタム イベントにバインドされます。
- info は、子から親に渡されるパラメーターです。
- バインディングは、リッスン イベント (ルール) として識別しやすい形式に
@onXxxする
<template>
<HelloWorld @onSayHello="sayHello" />
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
methods: {
sayHello(info) {
console.log('hello', info);
}
},
components: {
HelloWorld },
};
</script>
HelloWorld.vue 子コンポーネント
- セットアップで 2 つのパラメーターを渡す
- 最初のパラメーター props、プロパティを取得します
- 2 番目のパラメーターはオブジェクトであり、オブジェクトの構造化の後は、emit プロパティです。
- その後、emit を介してカスタム イベントが呼び出され、後でパラメーターを渡すために使用されます。
<template>
<p>emits 的使用</p>
</template>
<script>
export default {
name: 'HelloWorld',
emits: ['onSayHello'],
setup(props, {
emit }) {
emit('onSayHello', 'vue3')
}
};
</script>
3.ライフサイクル
4. 複数のイベント
メソッドで one two two 関数を定義する
<button @click="one($event), two($event)">Submit</button>
5. フラグメント コンポーネント テンプレート
vue2.x コンポーネント テンプレート: 複数の HTML タグをラップする必要があります
<template>
<div>
<h3>Hello Vue3</h3>
<p>前端杂货铺</p>
</div>
</template>
vue3.x コンポーネント テンプレート:ラップする必要はありません
<template>
<h3>Hello Vue3</h3>
<p>前端杂货铺</p>
</template>
6. .async を削除する
Async は、 v-model と同様に、親コンポーネント データと子コンポーネント データの間の双方向バインディングを実現できます。
Vue2 のコンポーネントには 1 つの v-model しか存在できず、.sync 修飾子は多数の v-model を持つことができます
// vue2.x
<MyComponent v-bind:title.sync="title" />
// vue3.x
<MyComponent v-model:tilte="title">
7. 非同期コンポーネントの作成
Vue2.x の書き込み
new Vue({
components: {
'my-component': () => import('./xxx.vue')
}
})
Vue 3.x 写法
import {
createApp, defineAsyncComponent } from 'vue'
createApp({
components: {
AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
})
8.フィルターを外す
次のフィルターは vue3 では使用できません
{
{
message | capitalize}}
<div v-bind:id="rawId | formatId"></div>
9、テレポート
- コンポーネントの html 構造を指定された場所に移動できる手法です。
- データに設定
modalOpen: false
<button @click="modalOpen = true">
打开全屏模式（使用 teleport）
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
telePort 弹窗（父元素是 body）
<button @click="modalOpen = false">关闭弹窗</button>
</div>
</div>
</teleport>
10、サスペンス
- 非同期コンポーネントがアプリのユーザー エクスペリエンスを向上させるのを待っている間に、いくつかの追加コンテンツをレンダリングします。
<Suspense>
<Test1 /> <!-- 是一个异步组件 -->
<!-- #fallback 就是一个具名插槽
即 Suspense 组件内部，有两个 slot，
其中一个具名为 falllback -->
<template #fallback>
Loading...
</template>
</Suspense>
11、コンポジションAPI
- 反応性
- 参照関連
- 読み取り専用
- watch 和 watchEffect
- 設定
- ライフサイクルフック機能
不积跬步无以至千里 不积小流无以成江海
クリックしてフォローし、迷子にならないように、更新を続けてください...