Vue3

Vue3

watch

watch(()=>user.name,(newVal,oldVal)=>{},{
    deep:true,//深度监听
    immediate：true,//立即执行一次
    flush:"pre"//pre 组件更新执行调用 sync 同步执行 post 组件更新之后执行
})

watchEffect

watchEffect(
  () => {
    console.log(people.name);
    console.log(people.age);
  },
  {
    flush: "pre", //pre 组件更新执行调用 sync 同步执行 post 组件更新之后执行
    onTrigger(e) {
      //可以用于开发调试
      debugger;
    },
  }
);

components

import A from "./components/A.vue";

life

//beforeCreate created setup语法糖模式 没有这两个生命周期 用setup替代
setup;

onBeforeMount;
onMounted; //这里可以读到 dom

onBeforeUpdate;
onUpdated;

onBeforeUnmount;
onUnmounted;

install less

npm install less less-loader -D

defineProps({
  title: {
    type: String,
    default: "默认值",
  },
});

//ts

const props = defineProps<{
  title: string;
  arr: any[];
}>();

//ts define defaults
withDefaults(
  defineProps<{
    title: string;
    arr: any[];
  }>(),
  {
    arr: () => [666, 888],
  }
);

defineEmits

const emit = defineEmits(["on-click"]);
emit("on-click", "value")``;

//ts
const emit = defineEmits<{
  (e: "on-click", name: string): void;
  (e: "on-click2", name: string): void;
}>();

defineExpose //暴露一个属性 or 方法

defineExpose({
  name: "itinglight",
  open: () => console.log(1),
});

定义全局组件

main.ts

import Crad from "./components/card.vue";
app.component("Card", Crad);

递归组件

组件自己调用自己

动态组件

异步组件

<component :is="">

slot

• 匿名插槽
• 具名插槽

<slot name="footer"></slot>

<template v-slot:header> </template>

<template #header> </template>

• 作用域插槽
• 动态插槽

Vue3 new suspense Teleport

<template>
  <Suspense>
    <template #default>
      <SyncVue></SyncVue>
    </template>
    <template #fallback>
      <skeletonVue></skeletonVue>
    </template>
  </Suspense>
</template>

onActivate

onDeactivated

transition && transition-group

appear 页面进入执行

GSAP

npm install gsap -S

import gsap from "gsap";

gsap.set(el, {
  watch: 0,
  height: 0,
});

初始化数组的方法

//method1
new Array(81);
//method2
Array.apply(null, { length: 81 }) as number[];

Provide && inject

provide("key", value);
provide("key", readonly(value));
let key = inject<Ref<string>>("key")``;

bus mitt

npm install --save mitt

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";

const app = createApp(App);
app.config.globalProperties.$mybus = mitt();