前言:

這是個人學習vue3的筆記，文章內容僅自己學習理解。如有錯誤或者不足地方強烈歡迎各位指正！

一、特性和作用
setup（） 函式是vue3一大特性函式。
setup 方法 代替了 vue2 的 data,method，watch資料和方法全部寫到setup（）中。
setup 函式是 CompositionAPI（組合式API） 的入口函式。通過return來暴露我們需要使用的資料。

CompositionAPI(組合式API) ：以業務邏輯為中心,當業務比較多時,能使程式碼更加內聚，可以並置與同一邏輯問題相關的程式碼

簡單例子

	// 使用函式前需要引入
import {ref}
 
 from "vue"
  setup(){      
      let her = "superman"     
      const girl = ref(["熱巴","娜扎","嘰裡呱啦"])
      return{        // 定義了需要return 出來
        girl,her
      }
    }

還可以寫成——直接返回物件

返回的所有內容都通過setup 暴露出去， （計算屬性，方法，生命週期掛鉤等）以及元件的模板。

   setup(props,
 
 { attrs, slots, emit }) {
      return {
        content: ' setup 中返回的資料',
        onLog: () => {
          console.log('呼叫 onLog')
        }
      }
    },
    template: `
      <div>
        {{content}}
        <button @click="onLog">log</button>  
      </div>
    `
 

跟vue2相比，在beforeCreate和created 之前就執行了。也可以理解為代替了這兩個鉤子函式setup（）執行的時候data，methods 都是未初始化的，不能夠呼叫。所以this 替換成了 undefined

setup有兩個引數

• props 接收資料(響應式)
• context 是一個普通的Javascript物件,渲染到上下文。可在模板使用

Props

setup 函式中的 props 是響應式的，當傳入新的 prop 時，它將被更新。但是，因為 props 是響應式的，你不能使用 ES6
解構，因為它會消除 prop 的響應性。 toRefs來結構 props（需要先import 引入）

context

這個物件暴露了三個元件的屬性，非響應式資料。可以通過解構方式獲取

attrs： 它是繫結到元件中的 非 props 資料，並且是非響應式的。
slots： 是元件的插槽，同樣也不是 響應式的。
emit：是一個方法，相當於 vue2 中的 this.$emit 方法。

// setup(props, context) { 
 setup(props, { attrs, slots, emit }) {
      // Attribute (非響應式物件) 非 props 資料
      console.log(attrs)
      // 插槽 (非響應式物件)
      console.log(slots);
      // 觸發事件 (方法) === this.$emit
      console.log(emit);
    }

注意點：

1、在setup()使用的宣告週期的鉤子函式或者其他函式方法都需要使用import 引用之後才能使用
2、在setup（）函式中定義的資料或方法都需要return 暴露出去。否則在模板中無法使用
3、setup()函式只能夠同步，不能夠非同步操作。
4、provide/inject 只能寫在setUp
5、setup()內使用響應式資料時，需要通過.value獲取。返回的物件property 可以在模板中被訪問，自動展開。不需要value