最近のプロジェクト開発は vue3 との正式な接触とも言えますが、親コンポーネントは子コンポーネントに値を渡しますが、子コンポーネントはその値を取得できないなど、使用過程で多くの落とし穴に遭遇しました。 onMounted で、配列が reactive を使用して定義されており、値を割り当てることができないなど。
1. 親から子へ初期化を渡す際に値が取得できない問題の解決方法。
まず、理由を分析します。子コンポーネントの DOM が最初にレンダリングされ、次に親コンポーネントがレンダリングされますが、親コンポーネントが値を取得した時点で、子コンポーネントはすでにレンダリングされているため、子コンポーネントが初期化中に値を取得できない場合は、その値を渡してデータが取得できたかどうかを判断してから、子コンポーネントをレンダリングすることでこの問題を解決できます。
2. reactive を使用して配列を定義すると代入ができない問題の解決方法。
1. 方法 1: ref を使用して定義できます。
2. 方法 2: let params = reactive({
データ：[]
})
3. 方法 3: let appData = [...data] を介して
値を割り当てることができない理由は、reactive で使用される Object.assign() がデータの浅いコピーを実行するため、データに値を割り当てることができなくなるためです。