你应该知道的Vue3基础使用

大家好，我是十七。

在尤大大发布Vue3以来可以说是火爆全球，在GitHub上Vue的热度已经超越React成为最热门的前端框架。

今天我们就来探究探究这Vue3如何在实战中运用？与Vue2有啥区别？

咱们来说说Vue2在开发中的一些缺陷：

1. 大型项目维护比较费力

在Vue2中，API有生命周期函数、computed、watch、 methods等等，在大型项目中，为了完成一个功能会在不同的API里面都进行相应的操作，比如

export default {
  props: {
    user: { type: String }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
//.............省略很多行
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // 使用 `this.user` 获取用户仓库
    }, // 1
    updateFilters () { ... }, // 3
//.............省略很多行
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

为了完成一个功能，各个API 都进行了逻辑处理，在大型项目中容易让人看的眼花缭乱，并且还需要跟着代码一步一步去分析，维护起来比较繁琐。

于是组合式API诞生了~~~~

Vue3与Vue2的最大区别就是出现了组合式API，何为组合式API呢？通俗来讲，就是将常用的API集合在一个空间内，可以一起使用来完成某个功能。

Vue3中的组合式API是这样书写的：

export default {
  props: {
    user: { type: String }
  },
  setup(props，context) { // 这里接受两个参数，一个是属性集合，一个是上下文
    console.log(props，context) // { user: '' }
    return {} // 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板
  }
  // 组件的“其余部分”
}

关于setup参数，第一个是props，和Vue2中的 props 同理，是父组件传递的值（响应式的，虽父组件值的改变而改变）；第二个参数是上下文，里面包含了attrs、slots、emit，依次是自身属性、插槽、事件，是非响应式的，可以用结构的书写方式书写。setup 里面 return 的所有内容都可以被组件其余部分使用。

在Vue3中还出现了一个神奇的东西----Ref，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

import { ref } from 'vue'

const counter = ref(0)

counter.value // 0
counter.value ++ // 1

这里的 counter 是一个对象，里面的value属性为0，也就是在ref函数里面传递的值。为什么要把 counter 设计成一个对象呢，这是因为对象在数据传递中传递的是索引值，就是说ref 对我们的值创建了一个响应式引用，你在很多个地方使用都不必关心他的数据是否更新，你只需要专心写逻辑即可。

setup 和 ref 相结合，如下所示：

export default {
  props: {
    user: { type: String }
  },
  setup (props) { //这里假设我们要根据父组件传过来的用户类型做一些事情
    const repositories = ref([])
    const getUserRepositories = async () => {
      repositories.value = await fetchUserRepositories(props.user)
    }

    return {
      repositories,
      getUserRepositories  //返回方法供组件其他部分使用
    }
  },
  data () {
    return {

    }
  },
  computed: {

  },
}

在setup中，还可以使用钩子函数，和 Vue2 中的钩子函数很相似，只不过名字是 on + 函数名，如下所示：

import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted } from 'vue'

// in our component
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }

  onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`

  return {
    repositories,
    getUserRepositories
  }
}

这里的 onmounted 执行的时间就是我们在函数组件生命周期 mounted 执行的时间。在这里可以执行我们的回调函数。

还有在setup里面还可以使用 computed 和 watch，用法也和Vue2组件用法相似，如下所示：

watch：

import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'

// 在我们组件中
setup (props) {
  const { user } = toRefs(props)
  const repositories = ref([])
  const getUserRepositories = async () => {
    //.....一些逻辑操作
  }
  watch(user, getUserRepositories)
  return {
    repositories,
  }
}

这里的watch和之前的功能相似，都是监控数据的变化，即 user 变化以后 getUserRepositories 函数，执行然后再进行相应的操作。

computed：

setup (props) {
  const { user } = toRefs(props)
  const repositories = ref([])
  const getUserRepositories = async () => {
    // ...........一些逻辑
  }
  const searchQuery = ref('')
  const comSearchQuery = computed(() => {
    return repositories.value.filter(
      repository => repository.name.includes(searchQuery.value)
    )
  })

  return {
    comSearchQuery ，
    //.......
  }
}

setup 里面的 computed 作用也和组建中 computed 相似，就是经过数据的运算得出结果，这个结果有缓存，如果依赖数据发生改变，computed的值也会响应式变化。

以上就是在 Vue3 中 setup 里面常用的 API 写法，可能有些地方说的不是很清楚，推荐大家查阅官方文档，文档很细致。

对于setup呢，我想写一下自己的见解，有不到之处，还请大家指正。setup 呢主要就是为我们提供一个逻辑处理区域，在这里提供了很多组件的 API，让以前在 computed、watch、生命周期等分散逻辑处理集中在一起进行处理，这样的话在以后维护中就不需要分开去阅读代码，只需要集中阅读 setup 即可，这样做可以代码的耦合性更低，我觉得 Vue3 在代码书写方面确实更加舒服一点。

以上就是我个人的一些看法，有不对的地方还请大家指正，谢谢。

你应该知道的Vue3基础使用

猜你喜欢