vue面试题

一、在Vue 3中,setup()函数起什么作用?

在 Vue 3 中,setup() 函数是一个新的组件选项,它是 Composition API 的入口点。setup() 函数在 beforeCreatecreated 生命周期钩子之间被调用,此时组件实例尚未被创建,因此你无法访问 this(组件实例)。然而,你可以通过 setup() 函数的参数和返回值来访问和暴露组件的状态、属性和方法。

setup() 函数接收两个参数:

  1. props:一个对象,包含了从父组件传递来的属性(props)。这个对象是只读的,你不应该尝试去修改它。
  2. context:一个上下文对象,包含了 attrs(非响应式对象,包含组件上未声明的特性/属性 (class 和 style 除外))、slots(包含组件插槽的函数)、emit(一个函数,用于触发自定义事件)等。

setup() 函数的返回值是一个对象,这个对象上的属性会被合并到组件的渲染上下文中。你可以在这个对象上定义响应式状态、计算属性、方法等,并在模板中直接使用它们。

setup() 函数的一个主要作用是提供了一种更灵活的方式来组织和复用组件逻辑。通过使用 Composition API 中的 refreactivecomputedwatch 等函数,你可以将相关的逻辑放在一起,而不是像 Options API 那样将它们分散在 datacomputedmethods 等选项中。

以下是一个简单的示例,展示了如何在 setup() 函数中定义响应式状态和方法:

javascript 复制代码
<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'

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

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

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

在这个示例中,我们在 setup() 函数中定义了一个响应式状态 count 和一个方法 increment,并将它们返回,以便在模板中使用。当按钮被点击时,increment 方法会被调用,更新 count 的值。

二、Vue 3中的watch和watchEffect有何不同?

Vue 3中的watchwatchEffect是两个用于监听响应式数据变化的API,但它们之间存在一些关键的不同点:

  1. 监听的数据源

    • watch:监听单个数据源,可以是响应式引用(如ref定义的变量)、计算属性或其他响应式对象。你可以指定一个或多个需要监听的响应式源,并在它们变化时执行回调函数[3]
    • watchEffect:监听一组数据源,它会自动收集其回调函数中所使用的所有响应式依赖,并在这些依赖变化时重新执行回调函数[2][3]
  2. 执行时机

    • watch:是懒执行的,即只有在其监听的数据源发生变化时,才会执行回调函数[3]
    • watchEffect:在组件初始化时立即执行一次,并在其依赖的响应式数据变化时重新执行[2][3]
  3. 选项设置

    • watch:允许你设置immediatedeep等选项。immediate选项可以在创建watcher时立即触发一次回调函数;deep选项则允许你深度监听一个对象的变化[3]
    • watchEffect:没有immediatedeep选项,因为它会立即执行,并自动收集所有依赖的响应式数据[3]
  4. 回调函数参数

    • watch:回调函数接收两个参数,即新值和旧值,允许你比较新旧值以执行特定的操作[3]
    • watchEffect:回调函数没有参数,因为它自动追踪所有依赖的响应式数据,并在这些数据变化时重新执行。因此,你可以在回调函数中直接访问和使用这些响应式数据,而不需要显式获取新值和旧值[2][3]
  5. 计算属性的监听

    • watch:可以监听计算属性(computed properties)的变化[3]
    • watchEffect:不能监听计算属性的变化[3]

总结来说,watchwatchEffect各有其适用场景。watch适用于需要监听特定数据源、获取新旧值或需要懒执行的场景;而watchEffect则适用于需要监听多个数据源、需要立即执行或自动追踪依赖的场景[3]

相关推荐
Hierifer15 分钟前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_26 分钟前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工1 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
EndingCoder1 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
半夏陌离1 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰1 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二1 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw1 小时前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件
前端