【vue】vue3 常用api

vue3 常用API

相关文章

vue3 常用api


一、setup

defineProps()

用于在组件内部定义 props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>

<script>
import { defineComponent, defineProps } from 'vue';

export default defineComponent({
setup() {
// 使用 defineProps 定义 props
const props = defineProps({
title: {
type: String,
required: true
},
content: {
type: String,
default: 'Default content'
}
});

return {
title: props.title,
content: props.content
};
}
});
</script>

defineEmits()

用于在组件内部定义 emits

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<button @click="handleClick">Click me</button>
</template>

<script>
import { defineComponent, defineEmits } from 'vue';

export default defineComponent({
setup() {
// 使用 defineEmits 定义 emits
const emits = defineEmits(['click']);

// 点击事件处理函数
function handleClick() {
// 触发自定义事件
emits('click', 'Button clicked');
}

return {
handleClick
};
}
});
</script>

defineModel()

用来声明一个双向绑定 prop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 声明 "modelValue" prop,由父组件通过 v-model 使用
const model = defineModel()
// 或者:声明带选项的 "modelValue" prop
const model = defineModel({ type: String })

// 在被修改时,触发 "update:modelValue" 事件
model.value = "hello"

// 声明 "count" prop,由父组件通过 v-model:count 使用
const count = defineModel("count")
// 或者:声明带选项的 "count" prop
const count = defineModel("count", { type: Number, default: 0 })

function inc() {
// 在被修改时,触发 "update:count" 事件
count.value++
}

defineExpose()

用于向父组件公开组件内部的数据或方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div>
<h1>{{ title }}</h1>
<button @click="increment">Increment</button>
</div>
</template>

<script>
import { defineComponent, defineExpose, ref } from 'vue';

export default defineComponent({
setup() {
const title = ref('Counter');
const count = ref(0);

const increment = () => {
count.value++;
};

// 使用 defineExpose 向父组件公开数据和方法
defineExpose({
title,
increment
});

return {
title,
increment
};
}
});
</script>

defineOptions()

这个宏可以用来直接在 <script setup> 中声明组件选项,而不必使用单独的 <script> 块:

defineSlots()

这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。

二、渲染函数

h()

用来创建虚拟节点(virtual nodes)

1
2
3
4
5
6
import { h } from 'vue';

// 使用 h 函数创建一个虚拟节点
const vnode = h('div', 'Hello, Vue 3!');

console.log(vnode); // 输出: 虚拟节点对象

mergeProps()

用于合并传入的 props 对象和额外的属性,以生成一个新的 props 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { mergeProps } from 'vue';

// 父组件传递的 props
const parentProps = {
color: 'red',
size: 'medium'
};

// 组件自身需要的 props
const componentProps = {
size: 'small',
weight: 'bold'
};

// 合并 props
const mergedProps = mergeProps(parentProps, componentProps);

console.log(mergedProps);

cloneVNode()

克隆一个虚拟节点

1
2
3
4
5
6
7
8
9
import { h, cloneVNode } from 'vue';

// 创建一个虚拟节点
const vnode = h('div', { class: 'example' }, 'Hello, Vue 3!');

// 克隆该虚拟节点
const clonedVNode = cloneVNode(vnode);

console.log(clonedVNode);

isVNode()

判断一个值是否为 vnode 类型。

resolveComponent()

根据组件的名称或组件对象解析出对应的组件对象

1
2
3
4
5
6
7
8
9
10
<!-- HelloWorld.vue -->
<template>
<h1>Hello, World!</h1>
</template>

<script>
export default {
name: 'HelloWorld'
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div>
<button @click="loadHello">Load HelloWorld</button>

<!-- 根据 currentComponent 动态加载组件 -->
<component :is="currentComponent" />
</div>
</template>

<script>
import { defineComponent, resolveComponent } from 'vue';
import HelloWorld from './HelloWorld.vue';

export default defineComponent({
name: 'DynamicComponent',
data() {
return {
currentComponent: null
};
},
methods: {
loadHello() {
this.currentComponent = resolveComponent('HelloWorld');
},
},
components: {
HelloWorld,
}
});
</script>

resolveDirective()

按名称手动解析已注册的指令

withDirectives()

用于给 vnode 增加自定义指令。

withModifiers()

用于向事件处理函数添加内置 v-on 修饰符。

三、响应式: 核心

ref()

使用 ref 创建响应式引用对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
// 使用 ref 创建一个响应式引用对象
const count = ref(0);

// 定义一个增加计数的方法
const increment = () => {
count.value++;
};

// 将数据和方法暴露给模板
return {
count,
increment
};
}
}
</script>

computed()

使用 computed 创建计算属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
<div>
<p>Num1: {{ num1 }}</p>
<p>Num2: {{ num2 }}</p>
<p>Sum: {{ sum }}</p>
<button @click="incrementNum1">Increment Num1</button>
<button @click="incrementNum2">Increment Num2</button>
</div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
setup() {
// 使用 ref 创建两个响应式数据
const num1 = ref(0);
const num2 = ref(0);

// 使用 computed 创建计算属性
const sum = computed(() => {
return num1.value + num2.value;
});

// 定义两个方法用于增加 num1 和 num2
const incrementNum1 = () => {
num1.value++;
};

const incrementNum2 = () => {
num2.value++;
};

// 将数据和方法暴露给模板
return {
num1,
num2,
sum,
incrementNum1,
incrementNum2
};
}
}
</script>

reactive()

使用 reactive 创建响应式对象:

1
2
3
4
5
6
7
8
9
10
11
12
import { reactive } from 'vue';

// 使用 reactive 创建一个响应式对象
const state = reactive({
count: 0
});

// 修改响应式对象的属性
state.count++;

// 直接访问响应式对象的属性
console.log(state.count); // 输出: 1

readonly()

用来创建一个只读的响应式对象或者数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { reactive, readonly } from 'vue';

// 创建一个普通的响应式对象
const original = reactive({
count: 0
});

// 使用 readonly 创建一个只读的响应式对象
const readOnlyObject = readonly(original);

// 尝试修改只读的响应式对象
// 这里会抛出一个错误,因为只读对象无法被修改
try {
readOnlyObject.count++;
} catch (error) {
console.error('Error:', error.message);
}

// 在原始对象上进行修改
original.count++;

// 访问只读对象的属性
console.log('ReadOnlyObject:', readOnlyObject.count); // 输出: 1

watchEffect()

使用 watchEffect 创建一个副作用函数,以响应式地追踪状态的变化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
setup() {
// 使用 ref 创建一个响应式数据
const count = ref(0);

// 使用 watchEffect 创建一个副作用函数
watchEffect(() => {
console.log('Count changed:', count.value);
});

// 定义一个增加计数的方法
const increment = () => {
count.value++;
};

// 将数据和方法暴露给模板
return {
count,
increment
};
}
}
</script>

watch()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);

// 使用 watch 监听 count 的变化
watch(count, (newValue, oldValue) => {
console.log('Count changed:', oldValue, '->', newValue);
});

const increment = () => {
count.value++;
};

return {
count,
increment
};
}
}
</script>

四、响应式: 工具

isRef()

用来检查一个值是否为 ref 对象的函数。它返回一个布尔值,如果传入的值是一个 ref 对象,则返回 true,否则返回 false。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { isRef, ref } from 'vue';

// 创建一个 ref 对象
const count = ref(0);

// 检查 count 是否为 ref 对象
console.log(isRef(count)); // 输出: true

// 创建一个普通对象
const obj = { value: 0 };

// 检查 obj 是否为 ref 对象
console.log(isRef(obj)); // 输出: false

unref()

用于返回 ref 对象的值。如果传入的值是一个 ref 对象,则 unref 函数会返回该 ref 对象的 .value 属性;如果传入的值不是 ref 对象,则 unref 函数会直接返回传入的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref, unref } from 'vue';

// 创建一个 ref 对象
const count = ref(0);

// 使用 unref 获取 ref 对象的值
console.log(unref(count)); // 输出: 0

// 创建一个普通对象
const obj = { value: 10 };

// 使用 unref 获取普通对象的值
console.log(unref(obj)); // 输出: { value: 10 }

// 使用 unref 获取普通值的值
const value = 20;
console.log(unref(value)); // 输出: 20

toRef()

用于创建一个 ref 对象,该对象引用另一个响应式对象的特定属性。以下是一个示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { reactive, toRef } from 'vue';

// 创建一个响应式对象
const state = reactive({
count: 0
});

// 使用 toRef 创建一个 ref 对象,引用 state 对象的 count 属性
const countRef = toRef(state, 'count');

// 修改 state 对象的 count 属性
state.count++;

// 通过 countRef 获取 state 对象的 count 属性的值
console.log(countRef.value); // 输出: 1

toValue()

将值、refs 或 getters 规范化为值

1
2
3
toValue(1) //       --> 1
toValue(ref(1)) // --> 1
toValue(() => 1) // --> 1

toRefs()

用于将响应式对象的所有属性转换为 ref 对象,并返回一个包含这些 ref 对象的普通对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { reactive, toRefs } from 'vue';

// 创建一个响应式对象
const state = reactive({
count: 0,
message: 'Hello'
});

// 使用 toRefs 将响应式对象转换为包含 ref 对象的普通对象
const refs = toRefs(state);

// 分别访问转换后的 ref 对象
console.log(refs.count.value); // 输出: 0
console.log(refs.message.value); // 输出: 'Hello'

isProxy()

用来检查对象是否是一个由 Vue 的响应式系统代理的函数

1
2
3
4
5
6
7
import { isProxy } from 'vue';

const obj = { foo: 'bar' };
const proxyObj = reactive(obj);

console.log(isProxy(obj)); // false
console.log(isProxy(proxyObj)); // true

isReactive()

用来检查一个对象是否是一个由 Vue 的响应式系统转换过的响应式对象

1
2
3
4
5
6
7
8
9
10
11
12
13
import { reactive, isReactive } from 'vue';

// 创建一个普通对象
const obj = { foo: 'bar' };

// 使用 isReactive 检查对象是否为响应式对象
console.log(isReactive(obj)); // 输出: false

// 使用 reactive 函数将普通对象转换为响应式对象
const reactiveObj = reactive(obj);

// 使用 isReactive 再次检查对象是否为响应式对象
console.log(isReactive(reactiveObj)); // 输出: true

isReadonly()

用来检查一个对象是否是一个只读的响应式对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { reactive, readonly, isReadonly } from 'vue';

// 创建一个普通对象
const obj = { foo: 'bar' };

// 使用 readonly 函数将普通对象转换为只读的响应式对象
const readonlyObj = readonly(obj);

// 使用 isReadonly 检查对象是否为只读的响应式对象
console.log(isReadonly(readonlyObj)); // 输出: true

// 使用 reactive 函数将普通对象转换为可变的响应式对象
const reactiveObj = reactive(obj);

// 使用 isReadonly 再次检查对象是否为只读的响应式对象
console.log(isReadonly(reactiveObj)); // 输出: false

喜欢这篇文章?打赏一下支持一下作者吧!
【vue】vue3 常用api
https://www.cccccl.com/20211025/vue/vue3 常用api/
作者
Jeffrey
发布于
2021年10月25日
许可协议