【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
#vue
【vue】vue3 常用api
https://www.cccccl.com/20211025/vue/vue3 常用api/
作者
Jeffrey
发布于
2021年10月25日
许可协议