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 } }
几点注意事项:
|