创建项目

npm init vite@latest

Composition API

在 Vue2.X 我们使用的是 OptionAPI 有我们熟悉的 data、computed、methods、watch 等等。 功能多起来分开的散乱，所以 Vue3 提出了 Composition API

分两种方式：写在 setup 方法中，或者使用script setup省略 setup 方法

<template>
  <div>{{ name }}</div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive } from "vue";
export default defineComponent({
  setup() {
    const dataMap = reactive({
      age: 18,
      name: "jason",
      someMethod() {
        dataMap.age = dataMap.age + 1;
      },
    });
    // 挂载后
    onMounted(() => {});
    // computed
    const sex = computed(() => {
      return "男";
    });
    // watch
    watch(
      () => dataMap.age,
      () => {}
    );
    return { ...toRefs(dataMap), sex };
  },
});
</script>

script setup 简写方式

<template>
  <div>{{ name }}</div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive } from "vue";
const dataMap = reactive({
  age: 18,
  name: "jason",
  someMethod() {
    dataMap.age = dataMap.age + 1;
  },
});
// 挂载后
onMounted(() => {});
// computed
const sex = computed(() => {
  return "男";
});
// watch
watch(
  () => dataMap.age,
  () => {}
);
</script>

ref

• 作用一： 通过 ref 定义基本类型响应式数据

<script lang="ts">
import { ref } from "vue";
// 方式一
let age = ref(18);
// 方式二
let num = 10;
let age2 = ref(num);
</script>

• 作用二： ref 获取元素

<template>
  <div ref="divRef"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const divRef = ref();
// 挂载后
onMounted(() => {
  console.log(divRef.value);
});
</script>

reactive

reactive 接收一个普通对象然后返回该普通对象的响应式代理对象，底层使用 Proxy 进行代理

<script lang="ts" setup>
import { reactive } from "vue";
let person = reactive({
  name: "jason",
  age: 18,
});
</script>

toRefs

把 reactive 响应式对象转化为 ref 响应式对象，让reactive中的每个属性进行分解使用， 在组件中就不用 obj[属性]的方式获取属性，代码看着简洁一些

<script lang="ts" setup>
import { reactive } from "vue";
let person = reactive({
  name: "jason",
  age: 18,
});
const { name, age } = toRefs(person);
</script>

computed 计算属性

<template>
  <div>{{ data }}</div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
let name = ref("jason");
let age = ref(18);
// computed
const data = computed(() => {
  return `我的名字:${name},年龄： ${age}`;
});
</script>

watch 侦听器

<template>
  <div>{{ name }}</div>
</template>

<script lang="ts" setup>
import { watch, ref } from "vue";
let name = ref("jason");
// watch
watch(name, (newName, oldName) => {
  name.value = `姓名${newName},老姓名${oldName}`;
});
</script>

Teleport 传送组件

<template>
  <ul>
    <li class="li-1"></li>
    <li class="li-2"></li>
    <li class="li-3"></li>
  </ul>
  <div class="btnGroup">
    <button @click="target = '.li-1'">传送li-1</button>
    <button @click="target = '.li-2'">传送li-2</button>
    <button @click="target = '.li-3'">传送li-3</button>
  </div>
  <teleport :to="target">
    <img src="...jpg" />
  </teleport>
</template>
<script lang="ts" setup>
import { defineProps, PropType, defineExpose, defineEmits } from "vue";
let target = ref(".li-1");
</script>

prop、emit、defineExpose

父子组件通信中，props 的定义， emit 定义使用， defineExpose 的作用是子组件的方法或数据暴露出去之后， 父组件才能通过 ref 获取的方式获取子组件的方法或数据

<script lang="ts" setup>
import { defineProps, PropType, defineExpose, defineEmits } from "vue";
// defineEmits
const emit = defineEmits(["handleEdit", "handleDelete"]);
// defineProps
const props = defineProps({
  columns: {
    type: Array as PropType<
      { prop: string; label: string; minWidth: number; scopedSlots?: any }[]
    >,
  },
  selectionIsNeed: {
    type: Boolean,
    default: false,
  },
  optionWidth: {
    type: String,
    default: "100",
  },
});
// emit调用
const handleDelete = (row: any) => {
  emit("handleDelete", row);
};
// defineExpose
defineExpose({
  handleDelete: handleDelete,
});
</script>

Vue3 生命周期

挺好记的， beforeCreate，created 变成了 setup， 其他的只要在前边加上 on

Vue2.X	Vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated