セットアップでのこれらの操作
まず、セットアップにこれはありません
<script setup>
import { ref } from 'vue'
const divRef = ref(null)
divRef.value
</script>
ここでの ref (null) です。ref は、vue をサポートする応答性の高いデータを作成するために使用されます。divRef は vue の Watcher で処理され、値のデータは divRef.value を通じて変更されます。使用できないことに注意してください。 = 直接 divRef の割り当て、これにより divRef の参照アドレスが変更されるため
vue3 のセットアップで ref の使用法を検索できます
setup() 関数を使用すると、セットアップにロジックを直接記述するだけで、Vue2 のデータ属性とメソッド属性を置き換えることができます。
定義の観点から見ると、次のようになります。
ref() は以下を定義するために使用されます: 基本型の変数
reactive() 関数は次の定義に使用されます。 複合型 (配列/オブジェクト) の変更を更新する
原則的な観点から:
1.ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
2.reactive是通过Proxy来实现响应式(数据劫持），并通过Reflect操作源对象内部的数据
使用法の観点から:
1.ref定义的数据：操作数据需要.value,读取数据时候模版中直接读取不需要.value
2.reactive定义数据：操作和读取均不需要.value
注: 返されたデータとメソッドはテンプレート内でのみ使用できるため、公開された変数とメソッドを正確に制御できます。
setup() {
const state = reactive({
name: 'cp',
age: 18
})
return {
...toRefs(state)
}
}
import { xxx } from 'vue' で導入できるすべての操作オブジェクト
ref は応答データを実装します
reactive は応答オブジェクト データを実装します
toRefs 構造体の後のデータを応答データに変換します
計算済みは計算済みプロパティに変換されます
監視しています
親子コンポーネントがデータを渡す
親子コンポーネントが受信するものを挿入しますデータ
onMounted vue ライフ サイクル
…
セットアップパラメータオブジェクト
setup(props,{emit})
props.key は渡されたデータを取得します