Vue3目前有两种用法：

Vue3中文文档

用法1：

在setup函数中为了兼容vue2语法，必须将数据与函数return返回，这种用法比较麻烦

<template>
  <div class="box">
    <TitleCom />
    <div>{{ msg }}</div>
    <div>{{ age }}</div>
    <button @click="addAge">增加年龄</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import TitleCom from "@/components/TitleCom.vue"; //导入的组件需要注册
export default defineComponent({
  components: { TitleCom },
  setup() {
    const data = reactive({
      msg: "用法1：setup()",
      age: 20,
    });
    onMounted(() => {
      addAge();
    });
    const addAge = (): void => {
      data.age++;
    };
    return {
      ...toRefs(data),
      addAge,
    };
  },
  //可以写vue2语法
  //created() {},
  //methods: {},
});
</script>
<style lang="scss" scoped></style>

用法2：

使用script lang="ts" setup，语法比较用法1更简洁（不兼容vue2语法）。注： Vue2中，template标签中只能有一个根元素，在Vue3中没有此限制 。

css 变量注入

<template>
  <div>测试1，根元素</div>
  <div>测试2，根元素</div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
const state = reactive({
  color: "red",
  fontSize: 28,
});
</script>
<style lang="scss" scoped>
div {
  // 使用v-bind绑定state中的变量
  color: v-bind("state.color");
  font-size: v-bind("state.fontSize+'px'");
}
</style>

生命周期函数

<template>
  <div>生命周期函数</div>
</template>
<script lang="ts">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
} from "vue";

onBeforeMount(() => {
  // 挂载前
});
onMounted(() => {
  // 挂载后
});
onBeforeUpdate(() => {
  // 更新前
});
onUpdated(() => {
  // 更新后
});
onBeforeUnmount(() => {
  // 卸载前
});
onUnmounted(() => {
  // 卸载后
});
onActivated(() => {
  // 缓存路由激活
});
onDeactivated(() => {
  // 缓存路由卸载
});
onErrorCaptured(() => {
  // 错误捕获
});
</script>
<style lang="scss" scoped></style>

nextTick函数，节点挂载更新完成后执行

<template>
  <div>nextTick</div>
</template>
<script lang="ts" setup>
import { nextTick } from "vue";
nextTick(()=>{
    //dom update completed
})
</script>
<style lang="scss" scoped></style>

async/与await处理异步， 可直接使用 await 了，因为这种情况下，组件的 setup 会自动变成 async setup。VsCode的Vetur插件，对vue3语法识别有误，可选择禁用。

<template>
  <div>async/await</div>
</template>
<script lang="ts" setup>
const post = await fetch('/api/***').then((res) => {})
</script>
<style lang="scss" scoped></style>

全局状态管理器（vuex）。注： Vue3 中的Vuex不再提供辅助函数写法 。

<script lang="ts" setup>
import { useStore } from "vuex";
// 必须先声明调用
const store = useStore();
// 获取Vuex的state
store.state.xxx;
// 触发mutations的方法
store.commit("fnName");
// 触发actions的方法
store.dispatch("fnName");
// 获取Getters
store.getters.xxx;
</script>

路由导航守卫

<template>
  <div></div>
</template>
<script lang="ts" setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
// 添加一个导航守卫，在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
  next();
});
// 添加一个导航守卫，在当前组件更新时触发。
// 在当前路由改变，但是该组件被复用时调用。
onBeforeRouteUpdate((to, from, next) => {
  next();
});
</script>
<style lang="scss" scoped></style>

路由跳转与传参

<template>
  <router-link to="/index?id=5">点击跳转并传参</router-link>
  <button @click="golink1()">跳转1</button>
  <button @click="golink2()">跳转2</button>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

function golink1() {
  // query编程式导航传参
  router.push({
    path: "/index",
    query: {
      id: 666,
    },
  });
}
function golink2() {
  //params编程式导航传参
  router.push({
    name: "index",
    params: {
      id: 666,
    },
  });
}
console.log(route.query, route.query.id); //获取路由传来的参数
console.log(route.params, route.params.id); //获取路由传来的参数
</script>
<style lang="scss" scoped></style>

原型绑定与组件内使用

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 获取原型
const prototype = app.config.globalProperties;
// 在原型上，绑定参数
prototype.name = 'Tom';

<script lang="ts" setup>
// 单文件组件内使用
import { getCurrentInstance } from 'vue'
// 获取原型
const { proxy } = getCurrentInstance()
// 输出
console.log(proxy.name)
</script>