10分钟带你上手Vue3中新增的API

当Vue3发布后，带来了不少令人期待的新特性，其中就包括了更新和新增了一些 API。在本次教程中，我们将重点介绍这些 Vue3 新增的 API，让初学者能够10分钟内快速入门 Vue3。

目录

• setup
• ref
• reactive
• computed
• watch
• 示例一：数组操作示例
• 示例二：计数器示例

setup

Vue3 添加了 setup 函数，它是 Vue 3 中的一个新组合 API，会在组件创建过程中执行。在 setup 函数中，通过参数 props、context、attrs 以及插槽等等来提供组件所需要的一切数据。

setup(props, context) {
  // setup 函数代码
}

ref

在 Vue3 中，新增了一个 ref 函数。该函数用于在组件内部创建一个响应式数据对象。我们可以使用 .value 的方式来读取或设置 ref 对象的值，当值发生变化时，会自动更新组件视图。

下面是 ref 函数的使用方式：

import { ref } from 'vue'

export default { 
  setup() {
    const count = ref(0)
    return { count }
  }
}

reactive

Vue3 中新增了一个 reactive 函数，它的作用是将传入的对象转化成 Proxy 对象，从而可以实现响应式数据的绑定。

下面是 reactive 函数的使用方式：

import { reactive } from 'vue'
export default { 
  setup() {
    const state = reactive({ count: 0 })
    return { state }
  }
}

computed

Vue3 中的 computed 函数与 Vue2 中的计算属性相似，都是用来计算属性值的。不同的是，Vue3 中的 computed 函数只需要包含一个 getter 函数即可。同时，computed 对象也是响应式的，当计算的依赖发生变化时，computed 会自动重新计算。

下面是 computed 的使用方式：

import { ref, computed } from 'vue'

export default { 
  setup() {
    const count1 = ref(0)
    const count2 = ref(0)
    const totalCount = computed(() => count1.value + count2.value)
    return { count1, count2, totalCount }
  }
}

watch

Vue3 中新增的 watch 函数用于观察一个变量的变化并且执行指定的回调函数。它不仅可以观察变量的值变化，还可以观察对象内某一个属性值的变化。

下面是 watch 的使用方式：

import { ref, watch } from 'vue'

export default { 
  setup() {
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
      console.log(`新值是 ${newValue}，旧值是 ${oldValue}`)
    })
    return { count }
  }
}

示例一：数组操作示例

<template>
  <div>
    <div v-for="item in computedItems">{{item}}</div>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const items = ref([1, 2, 3])
    const addItem = () => {
      items.value.push(items.value[items.value.length - 1] + 1)
    }
    const computedItems = computed(() => items.value.join(', '))
    return { items, addItem, computedItems }
  }
}
</script>

示例二：计数器示例

<template>
  <div>
    <p>当前值为：{{count}}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    const decrement = () => {
      count.value--
    }

    return { count, increment, decrement }
  }
}
</script>

总结一下，本篇文章主要讲解了 Vue3 中新增的 API，并且通过两个示例演示了其具体使用方式。包括：setup、ref、reactive、computed 和 watch 五个部分的内容。如果你还没有使用 Vue3，那么现在是一个好时机了。