Vue3學習筆記

為什么需要Composition API ?

主要原因：當一個組件的變得邏輯復雜的時候，痛點：多種邏輯代碼被分散到組件的各個部分，比如代碼的相關邏輯可能會在 data: {...}，computed: {...}, methods: {...}, watch:{...}這些模塊中的任何一處，維護這個組件的時候需要各種"Jump" 去尋找相關的代碼邏輯

setup 方法：

setup這個方法用法極其類似 react的hook。

需要注意的是：在setup這個方法中是不能調用 local state、computed properties、methods 這些數據或者方法，並且也沒有 this的概念。因為在執行setup的時候組件並沒有實例化完成。

// src/components/UserRepositories.vue
import { fetchUserRepositories } from '@/api/repositories'
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
    // inside our component
setup (props) {
// 之前的寫法是需要寫到data里面的，放到setup里面就把獲取數據與保存數據放到一起了，
  let repositories = []
  const getUserRepositories = async () => {
    repositories = await fetchUserRepositories(props.user)
  }

  return {
    repositories,
    getUserRepositories // functions returned behave the same as methods
  }
}
  // the "rest" of the component
}

 

ref的作用 與 react hook中的useState很相似

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'

// in our component
setup (props) {
// 注意 ref生成的返回值不是傳入的參數，而是放到一個對象的value值里面了，比如下 const number = ref(0) ; 那么number應該是 number = {value: 0}，這樣做的理由是基本數據類型不支持引用傳值 
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }

  return {
    repositories,
    getUserRepositories
  }
}

 幾點注意事項：

• setup(props, {...}) ; props不能用解構的方式獲取里面的值，這樣就丟失掉 props屬性值的自動響應能力
• 如果需要props的解構能力可以用 toRefs(props)來實現
• 如果ref生成的值，在template中使用的時候不要用value屬性，直接使用比如 const foo = ref(0); 在template中 <span>{{foo}}</span>不需要寫foo.value