vue3
# 创建项目
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 |