vue3中组合式Api的setup语法糖写法快速入门

安装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

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

二、Vue3中使用组件

2.1之前的用法

// App.vue

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

在

三、Vue3中父传子接收Props --> defineProps()

3.1之前的用法

传递数据给组件，传递的方式不变，接收时，需要在props中定义接收。setup函数被调用接收到的以第一个参数就是props。

// App.vue

// components/Demo.vue

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

在

四、Vue3中子传父emit自定义事件 --> defineEmits()

4.1之前的用法

子组件射出自定义事件给父组件，则需要通过emits定义好要传递的事件，setup函数中的第二个参数就是上下文对象centext(这里我们不详细介绍了)，然后通过这个对象去调用emit方法就可以射出自定义事件了。

// components/Demo.vue

// App.vue

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

在

五、Vue3中父组件获取组件的数据或方法 --> defineExpose()

5.1之前的用法

在子组件中，暴露组件变量或者方法时，不用做其他操作，只需要确保setup函数中return该变量或方法。因为在script标签中所有代码都使用expost default暴露了。而在父组件中需要通过给子组件添加ref属性，然后在onMounted生命周期函数中获取子组件的dom即可获得子组件的变量和方法
 

注意：获取dom是，一定在onMounted声明周期获取，因为页面没有渲染，就获取不要dom

// components/Demo.vue

// App.vue

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

在

// App.vue

总结

使用setup语法糖和setup函数对比，我们不难看出，使用语法糖是，代码整洁了好多，不会有那么多的对象嵌套。也不用做什么额外的return，代码也简化了不少。