8.高频面试真题与标准回答

import { ref, computed, onMounted } from 'vue'

export default {
  props: {
    initialValue: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    // 1. 状态 (等同于 data)
    const count = ref(props.initialValue)

    // 2. 计算属性 (等同于 computed)
    const doubleCount = computed(() => count.value * 2)

    // 3. 方法 (等同于 methods)
    const increment = () => {
      count.value++
      emit('change', count.value)
    }

    // 4. 生命周期钩子 (等同于 mounted)
    onMounted(() => {
      console.log('Component is mounted!')
    })

    // 暴露给模板
    return {
      count,
      doubleCount,
      increment
    }
  }
}

import { ref, watch, watchEffect } from 'vue'

const userId = ref(1)
const userInfo = ref(null)

// --- watch 示例 ---
// 明确侦听 userId 的变化，并在变化时执行操作
watch(userId, async (newId, oldId) => {
  console.log(`User ID changed from ${oldId} to ${newId}`)
  // userInfo.value = await fetchUser(newId) // 根据 ID 获取新用户数据
})

// --- watchEffect 示例 ---
// 自动依赖 userId，会立即执行一次，之后每当 userId 变化都会再次执行
watchEffect(() => {
  console.log(`Current User ID is: ${userId.value}`)
  // 这个函数会立即运行，打印 "Current User ID is: 1"
})

const changeUser = () => {
  userId.value++
}

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })

    onUpdated(() => {
      console.log('组件已更新')
    })

    onUnmounted(() => {
      console.log('组件已卸载')
      // 在这里清理副作用，如定时器、事件监听等
    })
  }
}

<!-- Parent.vue -->
<template>
  <Child 
    :message="parentMsg" 
    @response="handleResponse" 
    v-model:name="userName"
    ref="childRef"
  />
  <p>Received from child: {{ childResponse }}</p>
  <p>User name from child: {{ userName }}</p>
  <button @click="callChildMethod">Call Child</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const parentMsg = ref('Hello from Parent')
const childResponse = ref('')
const userName = ref('John')
const childRef = ref(null)

const handleResponse = (msg) => {
  childResponse.value = msg
}

const callChildMethod = () => {
  childRef.value.sayHi() // 调用子组件暴露的方法
}
</script>

<!-- Child.vue -->
<template>
  <p>{{ message }}</p>
  <button @click="$emit('response', 'Hi from Child')">Send Msg</button>
  <input :value="name" @input="$emit('update:name', $event.target.value)" />
</template>

<script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'

defineProps({
  message: String,
  name: String
})

defineEmits(['response', 'update:name'])

const sayHi = () => {
  alert('Hi!')
}

// 暴露方法给父组件
defineExpose({
  sayHi
})
</script>

<div v-memo="[item.id === selectedId]">
  <p>{{ item.name }}</p>
  <!-- 更多复杂的子节点 -->
</div>

import { createRouter, createWebHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/profile',
      // Profile 组件及其依赖只有在用户访问 /profile 时才会被加载
      component: defineAsyncComponent(() => import('./views/Profile.vue'))
    }
  ]
})