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

巴特西

Vue3学习笔记

为什么需要Composition API ?

setup 方法：

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

几点注意事项：

最新文章

热门文章

巴特西

Vue3学习笔记

为什么需要Composition API ?

setup 方法：

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

几点注意事项：

最新文章

热门文章

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