vue3常用语法

使用组件

官网详情

<template>
  <Bar />
  <component :is="Foo" />
</template>
<script setup>
import Bar from './Bar.vue'
import Foo from './Foo.vue'
</script>

ref、reactive

官网详情

• 基本类型一般使用ref
• 对象类型一般使用reacitve
• 数组两者都可以

隐式标注类型（ref、reactive会根据初始值推导类型）

import {ref, reactive} from 'vue'
const msg = ref('msg');	//msg.value
const num = ref(123);	//num.value
const someone = reactive({
	age: 11		// someone.age
});
const list1 = ref([]);	//list1.value
const list2 = reactive([1,2]); // list2[0] 即1

显式标注类型

import {ref, reactive} from 'vue'
import type {Ref} from 'vue'
// 方式1: 通过Ref指定类型
const msg1: Ref<string | number> = ref(123);
// 方式2: 传入泛型参数，覆盖默认的推导行为
const msg2 = ref<string | number>('msg');
// 如果没有给初始值，那么将是联合类型Ref<string | undefined>
const msg3 = ref<string>();

// 对象类型可以使用接口，不推荐使用范型参数
inerface Person {
	name: string
	age?: number
}
const someone: Person = reactive({
	name: 'Tom'
});

computed

官网详情

import {ref, computed} from 'vue'
const a = ref(0);
// computed也会自动推导类型（常用）
const double1 = computed(() => a.value * 2)	// double1.value

// 也可以通过泛型参数指定类型
const double2 = computed<number>(() => a.value * 2)	// double2.value

methods

function change(e: any):void {
  // 
}
const add = (a: number, b: number):number => a + b

// 如果父组件需要调用子组件的方法, 需要设置defineExpose
defineExpose({change, add})

watch

官网详情

import {ref, watch} from 'vue'
const msg = ref('')
const num = ref(0);
watch(msg, (newData, data) => {
  console.log(newData, data)
}, {immediate: true, deep: true})
watch(num, (newData, data) => {
  console.log(newData, data)
}, {immediate: true, deep: true})

props

官网详情

// 泛型参数
const props =  defineProps<{
  num1: { type: Number, required: true },
  num2: number,
  num3?: number
}>();

// 也可以使用interface
interface Props {
  num: { type: Number, required: true },
}
const props = defineProps<Props>();

// 设置默认值
const props = withDefaults(defineProps<{
	msg: string
}>(), {
	msg: 'hello'
});

emits

官网详情

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
const change = (id: number):void => {
  emit('change', id);
}
const update = (value: string):void => {
  emit('update', value);
}

生命周期

官网详情

<script setup>
import { onMounted，onUpdated} from 'vue'
console.log('beforeCreated, created')

onMounted(() => {
  console.log('mounted')
});
onUpdated(() => {
  console.log('updated')
})
</script>

路由

官网详情

import {useRouter, useRoute} from 'vue-router';
const router = useRouter(); // 用于路由跳转，如router.push()
const route = useRoute(); // 用于获取参数，如route.query、route.params
const currentRoute = computed(() => router.currentRoute.value.path); // 获取当前路由

slot

官网详情

• 可以直接通过$slots访问，slots中存在该值，则显示该插槽，否则不现实

<template>
   <div v-if="$slots.footer">
     <slot name="footer"></slot>
   </div>
</template>

• js中使用较少

import {useSlots} from 'vue';
const slots = useSlots();
const isHasFooter = ref(!!slots.footer) // 是否使用footer插槽
const hasSlots = ref(!!slots.default); // 判断插槽是否存在，或判断是否使用插槽