聊一聊Vue3.2中setup语法糖+volar

前言

现在,Vue3已经成为默认版本了。Vue3与Vue2相比较,变化还是比较大的。由原来的的组合式API变为选项式API。所以代码风格变化也是比较大的。为什么会有选项式API?我个人觉得very good!。

要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台。而Vue3.2之后官方就退出setup语法糖,使我们在写代码的时候更爽!!!

安装volar

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

聊一聊Vue3.2中setup语法糖+volar_第1张图片
聊一聊Vue3.2中setup语法糖+volar_第2张图片

Vue3中变量和方法

之前的用法

通过这个例子,我们可以知道,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 ++
    }
    return {
      count,
      increment
    }
  }
}
</script>

现在的用法(setup语法糖)

你可能感兴趣的:(vue,vue.js)