Vue3 でこれに代わるもの

順序：

公式の説明: setup() 内では、setup() は他のコンポーネント オプションを解析する前に呼び出されるため、これはアクティブなインスタンスへの参照にはなりません (つまり、vue インスタンスを指しません)。 ) 他のオプションではこれとはまったく異なります。これは、他のオプション API で setup() を使用するときに混乱を招く可能性があります。したがって、セットアップ機能では使用できません。したがって、間違った使用を避けるために、Vue はセットアップ関数でこれを直接 undefined に変更しました)

なるほど、 Vue3 ではライフサイクル beforecreate と create の前に setup が実行され、この時点では vue オブジェクトが作成されていないため、vue2.x で一般的に使用されている this は使用できません。

解決

vue の getCurrentInstance メソッドは ctx と proxy を返します. コンソールは ctx と proxy を出力し、それが vue2.x の this と同等であることが分かります. これを使い慣れている友人は代わりに proxy を使うことができます.

import {
    
    defineComponent, getCurrentInstance} from 'vue'

export default defineComponent ({
    
    
  setup(){
    
    
  
  	//vue3-typescript
    const {
    
     proxy, ctx } = (getCurrentInstance() as ComponentInternalInstance)
	//vue3-javascript
	const {
    
     proxy, ctx } = getCurrentInstance()
	
    const _this = ctx
    
    console.log('getCurrentInstance()中的ctx:', _this)
    console.log('getCurrentInstance()中的proxy:', proxy)
    
    return {
    
    }
  }
})

プロジェクトは、開発環境テストの下でプロキシを印刷します

注: vue3 プロジェクトをパッケージ化すると ctx は無効になります.また、provide + inject の方法で App.vue にグローバル変数を登録することもできます.