vue3.0 的 setup()

setup函數是 Composition API（組合API）的入口，

在setup函數中定義的變量和方法最后都是需要 return 出去的 不然無法再模板中使用。

setup函數是用於定義變量和方法的。

它的簡單使用：

1.引入ref 和 reactive 模塊

 

import {ref, reactive} from 'vue'

ref 模塊是用來聲明簡單數據類型的，例如,string , number ,boolean 等

reactive 模塊是用來聲明復雜數據類型的，例如，數組，對象等

2.使用setup函數，並在函數內使用ref 聲明簡單數據類型 和 復雜數據類型

setup(){
   let num = ref(0)  // ref 聲明簡單數據類型
   let arr = reactive([1,2,3])  // reactive 聲明復雜數據類型
   // 聲明方法
   let test = ()=>{
      return 111
   }
   // 返回數據
   return {
     num , arr ,test 
   }
 }
}

3、總結

1）使用setup 函數時，它將接受兩個參數：（props、context(包含attrs、slots、emit)）

2）setup函數是處於 生命周期函數 beforeCreate 和 Created 兩個鈎子函數之前的函數

3）執行 setup 時，組件實例尚未被創建（在 setup() 內部，this 不會是該活躍實例的引用，即不指向vue實例，Vue 為了避免我們錯誤的使用，直接將 setup函數中的this修改成了 undefined）

4）與模板一起使用：需要返回一個對象 (在setup函數中定義的變量和方法最后都是需要 return 出去的 不然無法再模板中使用)

5）使用渲染函數：可以返回一個渲染函數，該函數可以直接使用在同一作用域中聲明的響應式狀態

注意事項：

1、setup函數中不能使用this。Vue 為了避免我們錯誤的使用，直接將 setup函數中的this修改成了 undefined）

2、setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新。但是，因為 props 是響應式的，你不能使用 ES6 解構，因為它會消除 prop 的響應性。

如果需要解構 prop，可以通過使用 setup 函數中的 toRefs 來完成此操作：

import { toRefs } from 'vue'
 
setup(props) {
    const { title } = toRefs(props)
 
    console.log(title.value)
}

另外：context 是一個普通的 JavaScript 對象，也就是說，它不是響應式的，這意味着你可以安全地對 context 使用 ES6 解構

 

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

 setup()內使用響應式數據時，需要通過.value獲取

import { ref } from 'vue'
 
const count = ref(0)
console.log(count.value) // 0

4、從 setup() 中返回的對象上的 property 返回並可以在模板中被訪問時，它將自動展開為內部值。不需要在模板中追加 .value 

5、setup函數只能是同步的不能是異步的

 

暫時知道這么多，后面如果有發現會補充，也歡迎小伙伴兒們留言補充