vue面试题 - 技术栈

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

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

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

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

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

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

以下是一个简单的示例，展示了如何在 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中的watch和watchEffect是两个用于监听响应式数据变化的API，但它们之间存在一些关键的不同点：

监听的数据源：
- watch：监听单个数据源，可以是响应式引用（如ref定义的变量）、计算属性或其他响应式对象。你可以指定一个或多个需要监听的响应式源，并在它们变化时执行回调函数^[3]^。
- watchEffect：监听一组数据源，它会自动收集其回调函数中所使用的所有响应式依赖，并在这些依赖变化时重新执行回调函数^[2][3]^。
执行时机：
- watch：是懒执行的，即只有在其监听的数据源发生变化时，才会执行回调函数^[3]^。
- watchEffect：在组件初始化时立即执行一次，并在其依赖的响应式数据变化时重新执行^[2][3]^。
选项设置：
- watch：允许你设置immediate和deep等选项。immediate选项可以在创建watcher时立即触发一次回调函数；deep选项则允许你深度监听一个对象的变化^[3]^。
- watchEffect：没有immediate和deep选项，因为它会立即执行，并自动收集所有依赖的响应式数据^[3]^。
回调函数参数：
- watch：回调函数接收两个参数，即新值和旧值，允许你比较新旧值以执行特定的操作^[3]^。
- watchEffect：回调函数没有参数，因为它自动追踪所有依赖的响应式数据，并在这些数据变化时重新执行。因此，你可以在回调函数中直接访问和使用这些响应式数据，而不需要显式获取新值和旧值^[2][3]^。
计算属性的监听：
- watch：可以监听计算属性（computed properties）的变化^[3]^。
- watchEffect：不能监听计算属性的变化^[3]^。

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