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