vue3 でのセットアップ

目次

1.はじめに

2.セットアップ時の2つの戻り値

---

1.はじめに

1. setup はvue3 の新しい設定項目で、その値は関数です。

2. セットアップはすべてのCompositionAPI (コンポジション API) の基礎であり、コンポーネントで使用されるデータとメソッドはセットアップで構成する必要があります。

2.セットアップ時の2つの戻り値

1.オブジェクトを返すと、オブジェクトの属性とメソッドをテンプレートで直接使用できます (強調)

export default {
  name: 'App',
  setup(){
    // 数据
    let name = '张三'
    let age = '18'

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁了，你好啊`)
    }

    // 第一种return，返回一个对象
    return{
      name,
      age,
      sayHello
    }
  }
}

2.レンダリング関数を返す: レンダリング コンテンツをカスタマイズできます (理解)

export default {
  name: 'App',
  setup(){
    // 数据
    let name = '张三'
    let age = '18'

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁了，你好啊`)
    }

    // 第二种return，返回一个渲染函数
    return ()=> { return h('h1','尚硅谷') }

    // 简写
    // return ()=> h('h1','尚硅谷') 
  }
}

3、注意点：

①、vue3 は下位互換性をサポートします。vue2のデータとメソッドの構成項目はvue3 で使用できますが、vue3 の構成項目と vue2.x の構成項目を混在させないようにしてください。

②、vue2.x 構成 (データ、メソッド、計算済みなど) はsetup で属性とメソッドにアクセスできますが、 vue2.x 構成 (データ、メソッド、計算済みなど) はsetup でアクセスできません。

③. vue2.x 構成がvue3 構成と同じ名前の場合、セットアップが優先されます。

④、setup を非同期関数にすることはできません。これは、戻り値が戻りオブジェクトではなくプロミスであり、テンプレートが戻りオブジェクトのプロパティを認識できないためです。