Vue3 测验 7 | 菜鸟工具

1/10问题

1. 问题

关于自定义指令，以下说法正确的是？

只能在组件创建时注册
生命周期钩子与组件相同
可以传递参数和修饰符
不能应用于组件上

2/10问题

2. 问题

以下哪个 API 适合在组件卸载时清理副作用？

onMounted()
onUpdated()
onUnmounted()
onBeforeUpdate()

3/10问题

3. 问题

以下哪个 API 可以优化大型列表的渲染性能？

shallowRef()
shallowReactive()
markRaw()
v-memo

4/10问题

4. 问题

关于 Vue3 的 v-bind 和 CSS 变量，以下说法正确的是？

不能在 style 标签中使用 v-bind
只能绑定到 data 中的属性
支持在 CSS 中使用 JavaScript 变量
需要额外的插件支持

5/10问题

5. 问题

在 Vue3 中，以下哪种情况不会触发组件重新渲染？

props 发生变化
reactive() 创建的对象的属性被修改
ref() 创建的值被重新赋值
组件内局部变量发生变化

6/10问题

6. 问题

关于 <script setup> 语法糖，以下说法错误的是？

顶层绑定会自动暴露给模板
需要手动返回模板中使用的变量
可以使用 defineProps 定义 props
支持顶层 await

7/10问题

7. 问题

当 isActive 为 true，hasError 为 false时，渲染结果是？

<div :class="{'active': isActive, 'error': hasError}"></div>

<div class>
<div class="active">
<div class="active error">
<div class="error">

8/10问题

8. 问题

在模板中使用这个 prop 的正确方式是？

props: {
  title: {
    type: String,
    required: true
  }
}

<div>{{ this.title }}</div>
<div>{{ $props.title }}</div>
<div>{{ title }}</div>
以上都可以

9/10问题

9. 问题

在 Vue3 中，如何正确使用 v-for 渲染一个数组？

const items = ref(['Apple', 'Banana', 'Orange'])

<div v-for="item in items">{{ item }}</div>
<div v-for="item of items">{{ item }}</div>
<div v-for="(item, index) in items">{{ index }}: {{ item }}</div>
以上都可以

10/10问题

10. 问题

在 Vue3 中，如何正确监听一个 ref 值的变化？

const count = ref(0)

watch(count, (newVal) => {
  console.log(newVal)
})

watch(() => count.value, (newVal) => {
  console.log(newVal)
})

watchEffect(() => {
  console.log(count.value)
})

以上都可以

测验概述

信息

测验结果

类别