【Vue3】vue3中组合式Api的setup写法快速入门上手起步

要使用Vue3，那必须得会setup，因为setup是组合式API表演的舞台。

安装volar

如果你的VScode之前安装有vuter插件，请先把他禁用或者卸载掉，然后安装volar。
因为，vuter插件是针对Vue2的，而Vue3的写法跟Vue3是有区别的，特别是使用setup语法糖之后，所以写代码的时候可能会有报错。
volar插件则是针对Vue3的。安装之后就不报错，而且有提示出来。而且点击右上角的小图标，还可以将html代码、js代码和css代码做分开展示。

一、Vue3中变量和方法

1.1 之前的用法

通过这个例子，我们可以知道，Vue3中HTML模板不再需要一个根标签了，数据也不用在data中定义，方法也不需要在methods中定义。而且，模板中需要的数据、方法必须在setup中返回(return)。

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用h2>
  <button @click="increment">点击了 {{ count }} 次了button>
template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let count = ref(0)
    const increment = () => {
      count.value ++
    }
    /*不使用script-srtup语法糖需要导出需要在template使用的变量和方法*/
    return {
      count,
      increment
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.2 现在的用法(setup语法糖)

在