vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  データ:関数(){
    戻る {
      混乱：「私はデータだ」
    }
  },
  方法:{
    関数(){
      console.log("メソッド内の関数")
    },
  },
  設定（）{
    console.log('this',this);//未定義
    this.func();//呼び出すことができません},
}
</スクリプト>

<テンプレート>
 <div>
    <div>
      <li>{{str}}</li>
      <button @click="func1">ボタン</button>
    </div>
 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
   設定（）{
    // リアクティブの本質は、受信データをプロキシ オブジェクトにラップすることです。 // オブジェクトは作成時に渡されないため、応答性は実現されません。
    str = リアクティブ(123)とする
    関数func1(){
      console.log(str);//123
      666 文字
    }
    {str,func1} を返す
  },
}
</スクリプト>

<テンプレート>
 <div>
    <div>
      <li>{{arr}}</li>
      <button @click="func1">ボタン</button>
    </div>
 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
   設定（）{
    arr=reactive([{name:'张三',age:19},{name:'李四',age:39}]) とします。
    関数func1(){
      arr[0].name="私は張三の弟です"
    }
    {arr,func1} を返す
  },
}
</スクリプト> 

<テンプレート>
 <div>
    <div>
      <li>{{sate.time}}</li>
      <button @click="func1">ボタン</button>
    </div>
 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
   設定（）{
    状態 = リアクティブ({
      時間:新しい日付()
    })
    関数func1(){
      //他のオブジェクトが渡され、 sate.time が直接更新されます="2021年-6月-9日";
    }
    {sate,func1} を返す
  },
}
</スクリプト>