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>