目次
2.1.1 セットアップオプションの書き込み方法と実行タイミング
2.2 応答性の高いデータの生成: reactive 関数と ref 関数
第 2 章、複合 API
2.1 エントリ: セットアップ
2.1.1 セットアップオプションの書き込み方法と実行タイミング
- 言葉遣い
<script>
export default {
setup(){
},
beforeCreate(){
}
}
</script>- タイミング: beforeCreate フックの前に実行されます。
<script>
export default {
beforeCreate(){
console.log("beforeCreate生命钩子执行了-------------")
},
setup(){
console.log("setup生命钩子执行了-------------")
},
}
</script>
2.1.2 セットアップでのコード記述の特徴
setup 関数に記述されたデータとメソッドは、テンプレートで使用する前に最後にオブジェクトとして返される必要があります。
<script>
export default {
setup(){
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
// 必须return才可以
return {
message,
logMessage
}
}
}
</script>2.1.3 スクリプトのセットアップ構文シュガー
script タグは setup タグを追加します。export ステートメントを記述する必要はありません。export ステートメントはデフォルトで追加されます。
<script setup>
const message = '关注我！！！'
const logMessage = ()=>{
console.log(message)
}
</script>
<template>
<h2>内容：{
{message}}</h2>
<br>
<button @click="logMessage">输出消息</button>
</template>
2.1.4 セットアップにおけるポイント
これはコンポーネント インスタンスを指すことはなくなり、未定義を指すようになります。
<script setup>
const logThis = ()=>{
console.log("Vue3中this的指向",this)
}
</script>
<template>
<button @click="logThis">this</button>
</template>
2.2 応答性の高いデータの生成: reactive 関数と ref 関数
2.2.1 リアクティブ機能
オブジェクト型データのパラメータを受け入れ、応答オブジェクトを返します。
<script setup>
// 导入
import {reactive} from 'vue'
// 执行函数 传入参数 变量接收
const message = reactive({
name:'关注我！！！'
})
const logMessage = ()=>{
// 修改数据更新视图
message.name += '！'
}
</script>
<template>
<h2>内容：{
{message.name}}</h2>
<br>
<button @click="logMessage">输出消息+!</button>
</template>reactive で定義されたオブジェクトが reactive オブジェクトであることを確認してください
2.2.2 ref関数
単純型またはオブジェクト型のデータを受信し、応答オブジェクトを返します。ref を使用して第 1 レベルのオブジェクトを取得し、必ず.value を追加してください。
<script setup>
// 导入
import { ref } from 'vue'
// 执行函数 传入参数 变量接收
const count = ref(0)
const setCount = ()=>{
// 修改数据更新视图必须加上.value
count.value++
}
</script>
<template>
<button @click="setCount">{
{count}}</button>
</template>ref 定義も応答オブジェクトであることを確認してください。
2.2.3 リアクティブとリファレンス
- 1. 同じ点: どちらもレスポンシブ データの生成に使用されます
- 2. 相違点
--reactive は単純なタイプのデータを処理できません
-- ref パラメータのタイプのサポートが向上していますが、.value を通じて変更する必要があります。
-- ref 関数の内部実装は reactive 関数に依存します
- 3. 実際の推奨事項
-- メモリの負担を軽減するために ref 関数を使用することをお勧めします
2.3 計算されたプロパティ: 計算された
計算プロパティの基本的な考え方は Vue2 と一致しており、結合 API での計算プロパティは API の記述方法を変更するだけであり、非同期リクエストや DOM の変更などはできません。
主要な手順:
1.計算された関数をインポートします
。 2.実行関数は、コールバック パラメーター内の応答データに基づいて計算された値を返し、それを変数で受け取ります。
<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(1)
// 计算属性
const doubleCount = computed(()=>count.value * 2)
// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(()=>{
return list.value.filter ( item=>item > 2)
})
</script>
<template>
<div>初始数据ref基本类型：{
{ count }} </div>
<div>计算属性数据：{
{ doubleCount }} </div>
<div>原始数据ref引用类型：{
{ list }}</div>
<div>计算属性数据：{
{ filterList }}</div>
</template>
2.4 データ監視: 監視
1 つ以上のデータ変更をリッスンし、データ変更時にコールバック関数を実行します。watch の 3 番目のパラメーター (2 つの追加パラメーターは即時実行を制御し、deep はディープ リスニングを可能にします)
2.4.1 単一データを聞く
主要な手順:
1. ウォッチ関数をインポートします。
2. ウォッチ関数を実行して、応答データ (ref オブジェクト) とリッスンするコールバック関数を渡します。
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const setCount = ()=>{
count.value++
}
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
})
</script>
<template>
<button @click="setCount">{
{ count }}</button>
</template>
2.4.2 複数のデータのリスニング
複数のデータをリッスンし、最初のパラメータを配列として書き換えることができ、取得される古い値と新しい値も配列の形式になります
説明:複数の応答データ変更を同時にリッスンします。どのデータ変更であっても、コールバックを実行する必要があります。
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')
const setCount = ()=>{
count.value++
}
const setName = ()=>{
name.value += 'p'
}
// 2. 调用watch 侦听变化
watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
console.log(`count或者name变化了`,[newCount, newName],[oldCount,oldName])
})
</script>
<template>
<button @click="setCount">{
{ count }}</button>
<button @click="setName">{
{ name }}</button>
</template>
2.4.3 すぐに聞く すぐに聞く
3 番目のパラメーターは、リスナーが作成されるとすぐにコールバックをトリガーし、応答データが変更された後もコールバックを実行し続けます。
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const setCount = ()=>{
count.value++
}
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
},{
immediate: true
})
</script>
<template>
<button @click="setCount">{
{ count }}</button>
</template>
2.4.4 ディープモニタリング
3 番目のパラメーター、watch によって監視される ref オブジェクトはデフォルトで浅いリスニングです。ネストされたオブジェクトのプロパティを直接変更してもコールバックの実行はトリガーされません。深いリスニングを有効にする必要があります。
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state
watch(state, ()=>{
console.log('数据变化了')
},{
immediate:true,
deep:true
})
const changeStateByCount = ()=>{
// 直接修改不会引发回调执行
state.value.count++
}
</script>
<template>
<button @click="changeStateByCount">{
{ state.count }}</button>
</template>1. オブジェクトのより深い値が変更されましたが、検出されません
2. オブジェクトのより深い値が変更され、それも監視されます
2.5 ライフサイクルフック
基本的な使い方:
1. ライフサイクル関数をインポートします。
2. ライフサイクル関数を実行し、コールバックに渡します。
<script setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
console.log('组件挂载完毕mounted执行了')
})
</script>
複数回実行します。
複数の実行中に渡されたコールバックは、適切なタイミングで順番に実行されます。
<script setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
console.log('组件挂载完毕mounted执行了2')
})
onMounted(()=>{
// 自定义逻辑
console.log('组件挂载完毕mounted执行了1')
})
</script>
2.6 父子通信
2.6.1 父传子通信
基本的な考え方:
1. 親コンポーネント内の子コンポーネントに属性をバインドする
2. サブコンポーネントはprops オプションを通じてデータを受け取ります
親コンポーネント:
<script setup> //引入子组件
import sonComVue from './son.vue'
</script>
<template>
<!-- 1．绑定属性message -->
<div>父组件</div><br>
<sonComVue message="this is app message "/>
</template>サブアセンブリ:
<script setup>
//2．通过defineProps"编译器宏"接收子组件传递的数据
const props = defineProps({
message: String
})
</script>
<template>
<div>
子组件：{
{ message }}
</div>
</template> 
2.6.2 子传父通信
基本的な考え方:
1. 親コンポーネントで、@binding カスタム イベントを使用して子コンポーネントにラベルを付けます
2. $emit メソッドを通じて サブコンポーネント内でイベントがトリガーされます
親コンポーネント:
<script setup>
//引入子组件
import sonComVue from './son-com.vue '
//自定一函数方法
const getMessage = (msg)=→> {
console.log(msg)
}
</script>
<template>
<!--1．绑定自定义事件-->
<sonComVue @get-message="getMessage">
</template>サブアセンブリ:
<script setup>
// 2．通过 defineEmits编译器宏生成emit方法
const emit = definEmits(['get-message'])
const sendMsg =() {
// 3．触发自定义事件并传递参数
emit(' get-message ', 'this is son msg ')
}
</script>
<template>
<button @click="sendMsg">sendMsg</button>
</template>送信する前に:
送信後:
2.7 テンプレートのリファレンス
ref 識別を通じて実際の dom オブジェクトまたはコンポーネント インスタンス オブジェクトを取得します
主要な手順:
1. ref 関数を呼び出して ref オブジェクトを生成します
2. ref 識別子を介して ref オブジェクトをラベルにバインドします
<script setup>
import { onMounted, ref } from 'vue'// 1．调用ref函数得到ref对象
const h1Ref = ref(null)
onMounted(()=>{
console.log("hiRef",h1Ref)
})
</script>
<template>
<!--2．通过ref标识绑定ref对象-->
<h1 ref="h1Ref">我是dom标签h1</h1>
</template>
デフォルト
では、<script setup> の構文糖の下にあるコンポーネント内のプロパティとメソッドは、親コンポーネントからアクセスできるように開かれていません。defineExpose コンパイル マクロを通じて、どのプロパティとメソッドへのアクセスを許可するかを指定できます。
<script setup>
import { ref } from 'vue'
const testMessage = ref('this is test msg ')
defineExpose({ //向外暴露该组件的方法
testMessage
})
</script>マクロがdefineExposeでコンパイルされていない場合、出力refのサブコンポーネントにはメソッドがありません。
使用後、対応するメソッドが表示されます。
2.8 提供と注入
役割とシナリオ:トップレベルのコンポーネントは、データとメソッドを基礎となるコンポーネントに転送して、コンポーネント間の通信を実現します。
Provide:最上位コンポーネントは、provide 関数を通じてデータを提供します。
inject : 基礎となるコンポーネントは、inject 関数を通じてデータを取得します。
備考: 最上位コンポーネントが最下位コンポーネントにデータを提供する場合、最下位コンポーネントは値をレンダリングするだけです。最下位コンポーネントが渡された値を変更したい場合、最上位コンポーネントはメソッドを提供する必要があります。データを再度変更すると、最下位コンポーネントがメソッドを取得して呼び出します。 最上位コンポーネントによって渡された値を変更できます。
親コンポーネント:
<script setup>
import { provide, ref } from 'vue'// 1．调用ref函数得到ref对象
import son from './son.vue'
//1、顶层组件提供数据
provide("data-key","this is data 关注关注！！")
//传递响应式数据
const count = ref(0)
provide('count-key',count)
setTimeout(()=>{
count.value++
},3000)
//传递方法
const setCount = () =>{
count.value ++
}
provide('setCount-key',setCount)
const name = ref('*VE*')
provide('name-key',name)
setTimeout(()=>{
name.value += '关注我！！'
},3000)
</script>
<template>
<!--2．通过ref标识绑定ref对象-->
<div style="background-color: red; padding: 20px;">
<h1>顶层父组件</h1><br>
<son ref="sonRef"></son>
</div>
</template>中間コンポーネント:
<script setup>
import grandson from './grandson.vue'
</script>
<template>
<div style="background-color: gold; padding: 20px;">
<div>中间子组件</div><br>
<grandson/>
</div>
</template>低レベルのコンポーネント:
<script setup>
import { inject } from "vue";
//2、接收数据
const data = inject('data-key')
//接收响应式数据
const count = inject('count-key')
const name = inject('name-key')
//接收方法
const setCount = inject('setCount-key')
</script>
<template>
<div style="background-color: skyblue;">
<div>底层孙组件——</div>
<div>
来自顶层父组件的数据为：{
{ data }}<br />
来自顶层父组件的响应式数据为：{
{ count }}<br />
来自顶层父组件的响应式数据为：{
{ name }}<br />
<button @click="setCount">修改顶层组件的数据</button>
</div>
</div>
</template>最初のレンダリング:
レスポンシブ データ レンダリングを渡します。
転送方法: ボタンをクリックすると、番号の変更は最上位コンポーネントの値が変更されたことを示します
